THREE.js Crate Example

by solex16

HTML

<script src="http://www.html5canvastutorials.com/demos/assets/crate.jpg"></script>
<div id="container"></div>

CSS

div {
    margin: 0px;
    padding: 0px;
}

JavaScript

// -- http://www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/

// revolutions per second
var angularSpeed = 0.2; 
var lastTime = 0;

// this function is executed on each animation frame
function animate(){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.rotation.y += angleChange;
    lastTime = time;
    
    // render
    renderer.render(scene, camera);
    
    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
}

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

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;

// scene
var scene = new THREE.Scene();

// material
var material = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://www.html5canvastutorials.com/demos/assets/crate.jpg')
    //map: THREE.ImageUtils.loadTexture('crate.jpg')
});

// cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 20), material);
cube.overdraw = true;
cube.rotation.x = Math.PI * 0.1;
scene.add(cube);

// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);

// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// start animation
animate();