两幅画布作为三维飞机的纹理

Question

我想在three.js的平面上渲染两幅画布作为纹理。我创建了一个包含两个MeshBasicMaterial的数组，并执行了以下操作

texture2 = new THREE.Texture(c1);
texture3 = new THREE.Texture(c3); 
var mat1 = new THREE.MeshBasicMaterial({ map: texture2 });
var mat2 = new THREE.MeshBasicMaterial({ map: texture3 });    

materials.push(mat1);
materials.push(mat2);

mesh2 = new THREE.Mesh(geometry2, new THREE.MeshFaceMaterial( materials ));
scene2.add(mesh2);  

renderer2 = new THREE.WebGLRenderer({canvas:c2});
renderer2.setSize(c2.width, c2.height);

document.body.appendChild(renderer2.domElement);

我创建了这个here以显示我的实际问题。第二个纹理不在canvas2上渲染，但我想在其上显示两个纹理。

Answer 1

Reason

The reason why the second texture is not rendered is because it doesn't know which faces to assign the first or second material to, so by default it gives the first material to all of them.

Solution

• Update Three.js to latest build (r76). You're are now running r54
• Loop through all faces and assign them a materialIndex(Face3)

• Use THREE.MultiMaterial instead of THREE.MeshFaceMaterial:

  mesh2 = new THREE.Mesh(geometry2, new THREE.MultiMaterial( materials ));