在 A 帧中使用具有平铺纹理的 ambientOcclusionMap

Question

有人有将 ambientOcclusionMap 应用于 OBJ 模型的示例吗？

为了节省纹理大小，我想使用 material 组件平铺 materials 并将阴影单独烘焙到 ambientOcclusionMap 中。然而，当我应用 AO 贴图并调整强度时，整个 material 变得更暗 - 没有可见的阴影贴图。我错过了什么？有什么想法吗？

<a-entity obj-model="obj:#brick_walls-obj" material="src: #brick_walls_tiled_T; repeat: 10 10; ambientOcclusionMap: #brick_walls_shadow; ambientOcclusionMapIntensity: 0.5"></a-entity>

例如 - http://codepen.io/MannyMeadows/pen/KWZWvY

Answer 1

material 组件不适用于自定义模型。不过，您可以做的是创建一个组件，该组件可以直接对 THREE.Material 对象进行您需要的任何更改。

AFRAME.registerComponent('material-map', {
  schema: {
    map: {default: ''},
    uri: {default: ''}
  },
  init: function () {
    this.textureLoader = new THREE.TextureLoader();
    this.modify();
    this.el.addEventListener('model-loaded', this.modify.bind(this));
  },

  modify: function () {
    const textureLoader = this.textureLoader;
    const mesh = this.el.getObject3D('mesh');
    const data = this.data;

    if (!mesh) return;

    mesh.traverse(function(node) {
      if (node.material) {

        switch (data.map) {
          case 'emissiveMap':
            node.material.emissive = node.material.color.clone();
            node.material.emissiveMap = textureLoader.load(data.uri);
            break;
          default:
            node.material[data.map] = textureLoader.load(data.uri);
        }

        node.material.needsUpdate = true;
      }
    });
  }
});

用法：

<a-entity obj-model="obj: foo.obj; mtl: foo.mtl"
          material-map="map: aoMap; uri: foo_ao.png">
</a-entity>

注意：你的原始代码在我看来也是正确的，所以我不能 100% 确定为什么它不起作用......不过，这是我在类似情况下所做的事情，所以也许它会工作。

在 A 帧中使用具有平铺纹理的 ambientOcclusionMap

Using ambientOcclusionMap with tiled textures in A-frame

aframe