Aフレームにタイルテクスチャを使用してambientOcclusionMapを使用する

Question

ambientOcclusionMapをOBJモデルに適用する例はありますか？

テクスチャサイズを節約するために、マテリアルコンポーネントを使用してタイル張りのマテリアルを作成し、shadowをambientOcclusionMapに個別にベイク処理したいと思います。しかし、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

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％わからないんだけど...これは私がきたものです同様のケースで行われますが、多分それはうまくいくでしょう。