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