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.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides )

I can see from the code that “materials” is expected to be either a material, or an array of 6 different materials, but the materials passed in here never seem to be used when rendering.

Instead, the single material given to the Mesh constructor is used for all 6 faces.

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

Even if I pass null or undefined as the “some_material”, it seems to override the face_materials and render nothing.

Is there a way to make this work using CubeGeometry? Or do I have to create the 6 faces separately and add them to the scene?

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