Three.js cube

Simple Three.js demo.

by dja1

CSS

body {
    margin: 0;
    background: #000;
}

JavaScript

/* global THREE */

(function() {

    'use strict';

   	THREE.ImageUtils.crossOrigin = 'anonymous';

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.CubeGeometry(5, 5, 5);
    //var material = new THREE.MeshLambertMaterial({
    //    color: 0xff0000
    //});
    
    var material = new THREE.MeshPhongMaterial();
    material.map = THREE.ImageUtils.loadTexture('http://bandwidthmonitor.com/images/earthmap2k.jpg', null, function () {  }, function () {  });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 12;
    
    var pointLight = new THREE.PointLight(0xFFFFFF);

    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;

    var ambientLight = new THREE.AmbientLight(0x888888)
	scene.add(ambientLight)
    
    scene.add(pointLight);

    var reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

    var render = function() {
        reqAnimFrame(render);
        
        var delta = Math.random() * (0.06 - 0.02) + 0.02;

        cube.rotation.x += delta;
        cube.rotation.y += delta;
        cube.rotation.z -= delta;

        renderer.render(scene, camera);
    };

    render();

}());