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