How to use multiple materials in a Three.js cube?

Question

I am trying to use Three.js to render a cube with 6 different images on the faces.

The constructor of THREE.CubeGeometry looks like this:

THREE.CubeG         


        

Answer 1

You need to use THREE.MeshFaceMaterial for the mesh. Here's example code:

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

Answer 2

For an example of using multiple materials in a cube, for a recent version of three.js version 56 (March 2013), check out the source code of the example at http://stemkoski.github.com/Three.js/Textures.html -- the biggest recent change is that THREE.MeshFaceMaterial needs to be passed an array of materials to be used in the CubeGeometry.

Answer 3

MeshFaceMaterial is now deprecated so instead of using that you should pass in an array of MeshBasicMaterials.

However...if like me you only want to render a different color on each face anyways, then there is another way, described in WestLangley's answer here. The basic idea is that you set the color in the geometry object's faces, rather than as an array of materials.

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

This is a really efficient way of doing things.