THREE.jsは、クローン化された幾何学

Question

---

と同じメッシュまたは新しいメッシュに複数のテクスチャを適用します。私は本当に混乱しています

---

BELOW SOLUTIONを参照してください。目標を達成しようとしています。

読み込まれたメッシュで複数のテクスチャを使用します。

私は何回も検索しましたが、それでも私は同様の質問を見ることができますが、何も助けてくれませんでした。

私が試したことは（まだ）です。

ターゲットメッシュのジオメトリを使用して新しいメッシュを作成し、ターゲットのobject3d要素にプッシュしました。 （フォトショップのレイヤーのように）

var texture = new THREE.Texture(mapCanvas); 
texture.minFilter = THREE.LinearFilter; 
texture.needsUpdate = true; 

var material = new THREE.MeshPhongMaterial({map: texture, transparent: true}); 

var targetMesh = book.children[0].children[1], 
    newMesh = new THREE.Mesh(targetMesh.geometry, material); 

book.children[0].children.push(newMesh); 

結果、間違ったジオメトリ属性、または何か不足していますか？

しかし、私はそれが正しい順序で同時に複数のテクスチャを使用してのように簡単に解決することができると思い。

全コード：

sampleImage.onload = function() { 
    var mapCanvas = document.createElement('canvas'); 
    mapCanvas.width = sampleImage.width; 
    mapCanvas.height = sampleImage.height; 

    var ctx = mapCanvas.getContext('2d'); 
    ctx.translate(sampleImage.width/2, sampleImage.height/2); 
    ctx.rotate(Math.PI); 
    ctx.translate(-sampleImage.width/2, -sampleImage.height/2); 
    ctx.drawImage(sampleImage, 0, 0, sampleImage.width, sampleImage.height); 


    var texture = new THREE.Texture(mapCanvas); 
    texture.minFilter = THREE.LinearFilter; 
    texture.needsUpdate = true; 

    var material = new THREE.MeshPhongMaterial({map: texture, transparent: true}); 

    var targetMesh = book.children[0].children[1], 
     newMesh = new THREE.Mesh(targetMesh.geometry, material); 

    book.children[0].children.push(newMesh); 
}; 

Answer 1

私はクローニングと解決策を見つけました。

javascript配列プッシュを使用してメッシュグループに直接プッシュしないでください。

使用.addメソッド。

book.children[0].add(newMesh);