如何在A-Frame中正确可视化AO地图贡献

Question

我在Blender中创建了一个房间模型，并使用专用的UV套装烘焙了Ambient Occlusion。

然后我创建了一个新的材质，将烘焙的AO图像作为纹理并将其应用于整个模型。 Blender中的可视化是正确的。

我想使用A-Frame可视化我的模型，其中两个漫反射纹理（在TEXCOORD_0上）都是AO Map贡献（在TEXCOORD_1上）。

我目前使用的代码是：

<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你可以使用include the AO map when exporting from Blender，这需要一些设置，因为Blender的Principled 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>