Simple Box

three.js orbitControls

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

//... based on a JS Fiddle by WestLangleyvar camera, scene, renderer;

var lpos_x=-60,lpos_y=20, lpos_z=100;

F_init();
F_ellerdrop();
F_animate();

function F_init() 
{

    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0xaaaaaa));

	  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); // CHANGED
    camera.position.x = 0; // CHANGED
    camera.position.y = 0; // CHANGED
    camera.position.z = 100; // CHANGED
    scene.add( camera );

    var terrainGeo = new THREE.PlaneGeometry(15, 25);
    var terrainMaterial = new THREE.MeshLambertMaterial({
        color:  0x1ec876, side: THREE.DoubleSide
    });
    var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
    terrain.position.set (0,0,-10); // CHANGED
    scene.add(terrain);

    //light = new THREE.DirectionalLight(0xffffff, 1);
    //light.position.set(lpos_x, lpos_y, lpos_z);   
    //scene.add(light);

//... Axis Helper
	var Helper_axes = new THREE.AxisHelper( 1 ); //... initial length for all three axes.
	scene.add( Helper_axes );
	Helper_axes.scale.set( 10,10, 10 ); //... modifies axeis lengths.

    renderer = new THREE.WebGLRenderer({
        antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);

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

}//... EOF F_Init().

function F_ellerdrop()
{
var geo = new THREE.BoxGeometry(5,2,5);
//var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});

var mat = new THREE.MeshBasicMaterial( { color:0xfffff0, vertexColors: THREE.FaceColors } );//...West Langley

var mesh = new THREE.Mesh( geo, mat );

mesh.geometry.faces[ 8 ].color.setHex( 0x00ffff ); //...West Langley
mesh.geometry.faces[ 9 ].color.setHex( 0x000fff ); 

scene.add(mesh);

//Right there i want to chance color of the face. Its...