javascript - Verification of using multiple textures with three.js cubes

Question

Can someone please verify the following code for three.js r53?

It's taken from this question: How to use multiple materials in a Three.js cube?

I tried this code and a few variations but I don't get visible cubes. My texture images are named as they should be.

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 1

Do this instead:

var cubeGeo = new THREE.BoxGeometry( 400, 400, 400, 1, 1, 1 );
var cube = new THREE.Mesh( cubeGeo, materials );

materials is an array of 6 three.js materials, one for each face.

See the Migration Guide: https://github.com/mrdoob/three.js/wiki/Migration-Guide.

EDIT: CubeGeometry has been renamed to BoxGeometry and THREE.MeshFaceMaterial has been deprecated.

three.js r.92