如何在A框架中正确可视化AO地图贡献

Question

我使用专用的紫外线设置在搅拌机和烘焙环境闭塞中创建了房间模型。

i然后创建了一种新材料，并用烤制的AO图像作为纹理，并将其应用于整个模型。搅拌机中的可视化是正确的。

我想使用AO MAP贡献（在TexCoord_1上）使用A-fibfuse纹理（在TexCoord_0上）可视化我的模型。

我当前使用的代码是：

<a-scene stats>
    <a-assets>
        <a-asset-item id="roomLM-texture" src="models/AOMap.jpg"></a-asset-item>
        <a-asset-item id="room-model" src="models/edificio6.gltf"></a-asset-item>
    </a-assets>
    
    <a-sky color="#222"></a-sky>
    <a-entity id="room-instance" gltf-model="#room-model" material="ambientOcclusionMap:#roomLM-texture; color:#fff;"></a-entity>
</a-scene>

它能够用漫射纹理正确加载和可视化模型，但没有显示AO。我在这里缺少什么？

感谢您的任何帮助！

Answer 1

两个选项：

1 您可以在Blender导出时包括AO地图，因为Blender的原则BSDF节点没有AO输入，因此需要一些设置。

2 如果要单独带上AO纹理，则material组件无法修改已经具有材料的对象，因此它与gltf-model组件不兼容。您需要一个小的自定义组件来做到这一点。这样的东西：

AFRAME.registerComponent('ao-map', {
  schema: {
    src: {default: ''}
  },
  init: function () {
    var aoMap = new THREE.TextureLoader().load(this.data.src);
    aoMap.flipY = false;
    this.el.addEventListener('model-loaded', function(e) {
      e.detail.model.traverse((o) => {
        if (o.isMesh) {
          o.material.aoMap = aoMap;
          if (o.geometry.attributes.uv2 === undefined &&  
              o.geometry.attributes.uv !== undefined) {
            o.geometry.addAttribute( 'uv2', new THREE.BufferAttribute( o.geometry.attributes.uv.array, 2 ) );
          }
        }
      });
    });
  }
});

<a-entity gltf-model="..." ao-map="src: my-ao.png"></a-entity>