トラバースを使用して子オブジェクトに異なるテクスチャを適用するにはどうすればよいですか？

Question

私はTHREE.ObjectLoader()からロードされたオブジェクトを持っています。オブジェクトは、基本的にパネルとスティックで構成され、何も複雑なものではない、さまざまな要素で構成されています。

いくつかの子オブジェクトに異なるテクスチャを割り当てる必要があります。

残念ながら、オブジェクトのテクスチャ（material.map）のすべてが最後のセットmapをループから取得しています。サンプルコードを参照してください：私はコンソールをチェックすると

var objectLoader = new THREE.ObjectLoader(); 
objectLoader.load("carport-scene-nocolor.json", function (object) { 

    var textureLoader = new THREE.TextureLoader(); 
    var glass = textureLoader.load('glass2.jpg'); 
    var crate = textureLoader.load('crate.gif'); 

    object.traverse(function (child) 
    { 
     child.receiveShadow = true; 
     child.castShadow = true; 

     if (child instanceof THREE.Mesh) { 
      console.log(child.name); 

      child.material.shininess = 100; 
      child.material.wireframe = false; 
      child.material.normalScale = new THREE.Vector2(1, 1); 

      if(child.name === 'wooden_slats3') { 
       child.material.map = glass; 
       child.material.needsUpdate = true; 
      } else { 
       child.material.map = crate; 
       child.material.needsUpdate = true; 
      } 
     } 
    }); 
    object.position.y = -1; 
    object.position.x = 0; 
    object.receiveShadow = true; 
    object.castShadow = true; 

    scene.add(object); 
    scene.fog = new THREE.Fog(0xffffff, 50, 100); 
}); 

は、私が「wooden_slats4」と呼ばれるトラバースの最後の要素を見ることができます。私は 'wooden_slats3'がglassテクスチャであると期待していますが、すべてではありません。crateテクスチャマップを使用しています。

私がこれらの値を使い、if文を変更してchild.name === 'wooden_slats4'をチェックすると、それはオブジェクトの最後の子であるすべてのものに適用されます。

私はそれがobject.traverseの仕組みに問題があると思っていましたが、私がオンラインで読んだことから、私のアプローチは正しいです。

参考のため、コンソール出力は、次のとおり

pCube1 
pCube2 
pCube3 
pCube4 
wooden_slats2 
wooden_slats3 
wooden_slats4 

すべてのヘルプは高く評価します。

Answer 1

明らかに、child.materialを編集すると、その子/ JSオブジェクトだけでなく、グローバルマテリアルも編集されます。

私は子供の材料のクローンを作成し、代わりにそれを適用するために必要な：

var objectLoader = new THREE.ObjectLoader(); 
objectLoader.load("carport-scene-nocolor.json", function (object) { 

    var textureLoader = new THREE.TextureLoader(); 
    var glass = textureLoader.load('glass2.jpg'); 
    var crate = textureLoader.load('crate.gif'); 

    object.traverse(function (child) 
    { 
     if (child instanceof THREE.Mesh) { 
      console.log(child.name); 

      var material = child.material.clone(); 

      material.shininess = 100; 
      material.wireframe = false; 
      material.normalScale = new THREE.Vector2(1, 1); 

      if(child.name === 'wooden_slats3') { 
       material.map = glass; 
      } else { 
       material.map = crate; 
      } 
      child.material = material; 
     } 
    }); 
    object.position.y = -1; 
    object.position.x = 0; 
    object.receiveShadow = true; 
    object.castShadow = true; 

    scene.add(object); 
    scene.fog = new THREE.Fog(0xffffff, 50, 100); 
});