如何在three.js中将不同的材料应用于飞机的两侧？

Question

我使用

创建了简单的三角形平面

materials = [];
material1 = new THREE.MeshPhongMaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: THREE.FlatShading, side: THREE.FrontSide } );
material2 = new THREE.MeshPhongMaterial( { color: 0xf0f0ff, specular: 0xf0f0ff, shininess: -3, shading: THREE.FlatShading, side: THREE.BackSide } );
materials.push(material1);
materials.push(material2);
mat = new THREE.MeshFaceMaterial(materials);

tri = new THREE.Geometry();
tri.vertices.push(1, 1 ,1);
tri.faces.push(new THREE.Face3(0,1,2));
tri = new THREE.Mesh(tri, mat);

scene.add(tri);

我无法在任何一方获得不同的材料。我该怎么办？

我试图实现这种效果

Answer 1

你需要这样的东西：

var face = tri.faces[0].clone();
face.materialIndex = 1;
tri.faces.push(face);

http://jsfiddle.net/j8k7yhLp/1/