three.js 1 - rotating cube

my take at a cube rotating three.js demo

by Wolfgang Fahl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.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.rotation.z = 30;
    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 );
    
    
    //rotate 30 degrees on world X
    rotateAroundWorldAxis(cube, new THREE.Vector3(1,0,0), 30 * Math.PI/180);
    
    renderer = new...