0

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

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

我想使用带有漫反射纹理（在 TEXCOORD_0 上）和 AO 贴图贡献（在 TEXCOORD_1 上）的 A-Frame 来可视化我的模型。

我目前使用的代码是这样的：

<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。我在这里想念什么？

谢谢你的帮助！

4

1 回答 1

0

两种选择：

1您可以在从 Blender 导出时包含 AO 贴图，这需要一些设置，因为 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>
于 2019-03-06T18:45:47.937 回答