Applying textures on cube geometry using THREE.js - three.js

Question

I have a simple THREE.js app that renders a cube and applies textures on each of the faces like so:
var cubeGeometry = new THREE.CubeGeometry(5, 8, 1, 4, 4, 1);
var materials = [ new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('front.jpg') }),
//.....Front, back, left, etc...
];
...
var cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial(materials));
However, all I see is a black cube, i.e. the images dont appear ont the cube's faces.
Also, my code works fine in release 50 of the THREE.js library, so it seems like a change is a newer release has caused my code to break, and I cant seem to find any relavent documentation around it.
Any help is appreciated.

Answer 1

The following code should work as of release 97
// creates cubes geometry in front of camera (assuming your camera position and rotation has not changed)
var geometry = new THREE.CubeGeometry(1, 1, 1, -2, 0, 0);
// creates a texture loader for the cube
var texture = new THREE.TextureLoader();
// defines variables to make things easier
var counter, textures = [], materials = [];
// iterate through all 6 sides of the cube
for(counter = 0; counter < 6; counter ++) {
// loads and stores a texture (you might run into some problems with loading images directly from a source because of security protocols, so copying the image data is a for sure way to get the image to load)
textures[counter] = texture.load('data:image/restOfImageAddress');
// creates material from previously stored texture
materials.push(new THREE.MeshBasicMaterial({map: textures[counter]}));
}
// creates the cube by mixing the geometry and materials
var cubeMesh = new THREE.Mesh(geometry, materials);