如何在 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 个面并将它们添加到场景中？

Answer 1

MeshFaceMaterial 现在已弃用，因此您应该传入一个 MeshBasicMaterials 数组，而不是使用它。

但是...如果您像我一样只想在每个面上渲染不同的颜色，那么还有另一种方法，在 WestLangley 的 answer here 中进行了描述。基本思想是在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 ); 

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

Answer 2

有关在立方体中使用多种材质的示例，对于最近版本的 three.js 版本 56（2013 年 3 月），请查看示例的源代码 http://stemkoski.github.com/Three.js/Textures.html -- 最近最大的变化是 @ 987654322@ 需要传递一个要在CubeGeometry 中使用的材料数组。

Answer 3

您需要对网格使用 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());