如何在Three.js的立方体中使用多个材料？

Question

我想使用Three.js在立方体的6个面上渲染不同的图片。

THREE.CubeGeometry的构造函数如下：

THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides )

从代码中可以看出，“materials”预计是一个材料，或者是由6种不同材料组成的数组，但是这里传入的材料在渲染时似乎从未被使用。

相反，给Mesh构造函数的单个材料用于所有6个面。

var face_materials = ... <load 6 textures here>...
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored?
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead

即使我将null或undefined作为"some_material"传递，它似乎会覆盖face_materials并且什么都不会渲染。是否有一种方法可以在使用CubeGeometry时使其正常工作？还是我必须单独创建6个面并将它们添加到场景中？

- Chris Perkins

Answer 1

你需要使用THREE.MeshFaceMaterial对网格进行材质处理。这是示例代码：

var materials = [];
for (var i=0; i<6; i++) {
  var img = new Image();
  img.src = i + '.png';
  var tex = new THREE.Texture(img);
  img.tex = tex;
  img.onload = function() {
    this.tex.needsUpdate = true;
  };
  var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex});
  materials.push(mat);
}
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials);
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial());

- Ilmari Heikkinen

---

哇，那个有效！谢谢。MeshFaceMaterial是缺失的元素 - 相当令人费解，因为它的定义是：THREE.MeshFaceMaterial() = function(){};也许有一天我会弄清楚为什么它有效... - Chris Perkins

请参考https://dev59.com/cGvXa4cB1Zd3GeqPNuKr，了解如何在较新的three.js版本中实现使用多个纹理的方法。 - mpso

找不到MeshFaceMaterial，我猜它在新版本中已经被移除了吧？ - undefined

Answer 2

举个例子，如果你想在一个立方体中使用多个材质，可以参考最新版本的three.js 56（2013年3月）的示例源代码，访问http://stemkoski.github.com/Three.js/Textures.html -- 最近的最大变化是需要将THREE.MeshFaceMaterial传递一个材料数组以在CubeGeometry中使用。

- Stemkoski

Answer 3

MeshFaceMaterial现已弃用，因此您应该传递一个MeshBasicMaterials数组来代替使用它。

然而...如果像我一样，您只想在每个面上渲染不同的颜色，那么还有另一种方法，在WestLangley的答案中有描述。基本思路是将颜色设置在geometry对象的面上，而不是作为材料数组。

var geo = new THREE.BoxGeometry( 5, 2, 5 );

var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geo, mat );

mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff ); 

这是一种非常高效的做事方式。

- Brandon Jackson