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

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.