cube with different face colors

by Browork

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

JavaScript

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer({antialias:true}); 

renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0xffffff, 0); // bg color
document.body.appendChild(renderer.domElement); // displays canvas

camera.position.z = 13; // move away to see coord center
camera.position.y = 0;

controls = new THREE.TrackballControls(camera, renderer.domElement);

// CUBE
var geometry = new THREE.CubeGeometry(2,2,2);
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0x4500ff, transparent:true, opacity:1, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x4500ff, transparent:true, opacity:1, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x2500ff, transparent:true, opacity:1, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x2500ff, transparent:true, opacity:1, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x3600ff, transparent:true, opacity:1, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x3600ff, transparent:true, opacity:1, side: THREE.DoubleSide}), 
]; 
// Create a MeshFaceMaterial, which allows the cube to have different materials on each face 
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials); 
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add( cube );

var cube2 = new THREE.Mesh(geometry, cubeMaterial);
scene.add( cube2 );

cube.position.set(0,-2,0);

var cube3 = new THREE.Mesh(geometry, cubeMaterial);
scene.add( cube3 );

cube3.position.set(0,-4,0);

var render = function () { 
    requestAnimationFrame(render); 
    controls.update();
    renderer.render(scene, camera); 
};

render();