three.js所應用的同一網格或新的網格多重紋理與克隆的幾何

Question

---

見下文

---

我真的很迷茫解決方案。我試圖達到的目標是;

在加載的網格上使用多個紋理。

我已經搜索了多次，但我仍然可以看到類似的問題，但沒有任何幫助。

我試過的是（還）;

用目標網格的幾何創建一個新的網格，並推送到目標object3d元素。 （像一個photoshop層）。

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);