Question

我在Blender中创建了一个房间模型，并使用专用的UV套件烘焙了环境光遮挡。

然后我用烘焙的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组件不能修改已经具有材质的对象，因此它与{{1}不兼容} 零件。您将需要一个小的自定义组件来执行此操作。像这样：

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框架中正确可视化AO映射贡献

1 个答案: