How to create multiple Box and only change the texture on one side?

Question

I'm trying to apply a texture to only one side of a Box Object.

Basic code:

BoxGeo = new THREE.BoxGeometry(50, 50, 125);
BoxMat = new THREE.MeshLambertMaterial({ color: 0xF0F0F0 });
BoxObj = new THREE.Mesh(GeoBox, GeoMat);

I tried using an array containing 6 materials object, 5 colored and one with an image (randomly choosed from another array of textures for each Box). But it throws an error :(

Is it possible to provide a simple exemple of a Box with different texture for each face? I saw some exemple on the internet but they require to put the material array inside the Geometry object and I would like to avoid creating a new Geometric object for each Box for performance reasons.

Answer 1

What about this sample? It creates the material array and then adds it to the mesh. So, you could re-use it.

Relevant code:

// Create an array of materials to be used in a cube, one for each side
var cubeMaterialArray = [];

// order to add materials: x+,x-,y+,y-,z+,z-
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );

var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );

// Cube parameters: width (x), height (y), depth (z), 
//       (optional) segments along x, segments along y, segments along z
var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );

// using THREE.MeshFaceMaterial() in the constructor below
//   causes the mesh to use the materials stored in the geometry

cube = new THREE.Mesh( cubeGeometry, cubeMaterials );