【问题标题】：THREE.js Apply multiple textures on same mesh or new mesh with a cloned geometryTHREE.js 在同一个网格或具有克隆几何体的新网格上应用多个纹理
【发布时间】：2017-09-16 17:43:14
【问题描述】：

查看下面的解决方案

我真的很困惑。我要达到的目标是；

在加载的网格上使用多个纹理。

我已经搜索了多次，仍然可以看到类似的问题，但没有任何帮助。

我尝试过的是（还）；

使用目标网格的几何形状创建一个新网格并推送到目标 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);
};

【问题讨论】：

标签： three.js textures

【解决方案1】：

我找到了克隆解决方案。

不要使用 javascript 数组推送直接推送到网格组。

使用.add 方法。

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

【讨论】：