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

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

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.

Tags:

Three.Js

Recent Posts