如何在Three.js立方体中使用多种材质?

时间:2012-01-11 14:04:33

标签: three.js

我正在尝试使用Three.js渲染一个在面上有6个不同图像的立方体。

THREE.CubeGeometry的构造函数如下所示:

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

我可以从代码中看到,“材料”应该是一种材料,或者是一种由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个面并将它们添加到场景中?

3 个答案:

答案 0 :(得分:19)

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

答案 1 :(得分:3)

有关在多维数据集中使用多个材质的示例,对于最新版本的three.js版本56(2013年3月),请查看http://stemkoski.github.com/Three.js/Textures.html处示例的源代码 - 最近的最大更改是需要传递THREE.MeshFaceMaterial要在CubeGeometry中使用的材料数组。

答案 2 :(得分:0)

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 ); 

这是一种非常有效的处理方式。