mrdoob/three.js — Issue #1416: Different materials on each side of a cube
Author: enriquemorenotent
Created: 2012-02-28 11:17:45+00:00
State: open

I want to have a different face on each side of a cube. This is the code:

var materials = [
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '2.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '3.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '4.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '5.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( '6.png' ) } )
];

var geometry = new THREE.CubeGeometry( 80, 80, 80, 3, 3, 3, materials);
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());

cube.position.set( 0, 0, 0 );
scene.add( cube );

For some reason, I can only see the first material in all faces. What am I doing wrong?

Thanks!