javascript - 两个 Canvas 作为 Three.js 中平面的纹理

Question

我想在 Three.js 中将两个 Canvas 渲染为平面上的纹理。我创建了一个包含两个 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);

我创建了这个jsfiddle example来展示我的实际问题。第二个纹理未在 canvas2 上渲染，但我想在其上显示两个纹理。

Answer 1

原因

第二个纹理不渲染的原因是它不知道将第一个或第二个 Material 分配给哪些面，因此默认情况下它会将第一个 Material 分配给所有面。

解决方案

• 将 Three.js 更新到最新版本 (r76)。您现在正在运行 r54
• 循环遍历所有面并为其分配一个materialIndex( Face3 )

• 使用THREE.MultiMaterial而不是THREE.MeshFaceMaterial:

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