在 A 帧中使用带有平铺纹理的环境遮挡贴图答案

【问题标题】：Using ambientOcclusionMap with tiled textures in A-frame在 A 帧中使用带有平铺纹理的环境遮挡贴图
【发布时间】：2017-08-10 02:31:08
【问题描述】：

有没有人有将ambientOcclusionMap 应用到OBJ 模型的例子？

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

<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

【问题讨论】：

作为一个骗子，我已经加载了两次相同的 OBJ，将 AO 贴图应用于第二个 OBJ 材质并添加 opacity:0.99 以查看第一个 OBJ 上的平铺纹理。我确定有更聪明的方法可以做到这一点？

标签： aframe

【解决方案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% 确定它为什么不起作用……不过，这是我在类似情况下做过的事情，所以也许它会起作用。

【讨论】：