three.js 1 - rotating cube

my take at a cube rotating three.js demo

by phenomnomnominal

HTML

<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<div id="ctn"></div>

CSS

#ctn {
    margin: auto auto;
    width:  640px;
    height: 480px;
}

JavaScript

var wd = window;
if (!wd.requestAnimationFrame) {
    wd.requestAnimationFrame =
        wd.webkitRequestAnimationFrame ||
        wd.mozRequestAnimationFrame    ||
        wd.oRequestAnimationFrame      ||
        wd.msRequestAnimationFrame     ||
        function(cb, element) {wd.setTimeout(cb, 1000 / 30);};
}

var ctnEl = document.getElementById('ctn');
var camera, scene, renderer;
var cube, plane;

var tgtRot      = 0;
var tgtRotMouse = 0;

var mouseX      = 0;
var mouseXMouse = 0;

var winDims = [ctnEl.offsetWidth, ctnEl.offsetHeight];
var winHalfW = winDims[0] / 2;

function init() {
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera(70, winDims[0] / winDims[1], 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;
    camera.lookAt(new THREE.Vector3(0, 150, 0));   
    scene.add(camera);
    
    
    // cube mats and cube
    var mats = [];
    for (var i = 0; i < 6; i ++) {
        mats.push(new THREE.MeshBasicMaterial({color:Math.random()*0xffffff}));
    }
    
    cube = new THREE.Mesh(
        new THREE.CubeGeometry(100, 100, 100, 1, 1, 1, mats),
        new THREE.MeshFaceMaterial()
    );
    //cube.position.y = 150;
    cube.castShadow = true;
    scene.add(cube);
    
    // plane
    plane = new THREE.Mesh(
        new THREE.PlaneGeometry(1000, 1000),
        new THREE.MeshLambertMaterial( {color: 0xe0e0e0} )
    );
    plane.receiveShadow = true;

    scene.add(plane);

    var spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position.set( 0, 1500, 0 );
    
    spotLight.castShadow = true;
    
    spotLight.shadowMapWidth = 1024;
    spotLight.shadowMapHeight = 1024;
    
    spotLight.shadowCameraNear = 500;
    spotLight.shadowCameraFar = 4000;
    spotLight.shadowCameraFov = 30;
    
    scene.add( spotLight );
    

    renderer = new THREE.WebGLRenderer();
    renderer.shadowMapEnabled = true;
    
    renderer.setSize(winDims[0], winDims[1]);
   ...