three.js 1 - rotating cube
my take at a cube rotating three.js demo
HTML
<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<script src="http://mrdoob.github.com/three.js/build/Stats.js"></script>
CSS
body {
overflow: hidden;
}
canvas {
margin: auto auto;
width: 600px;
height: 400px;
}
JavaScript
var App;
App = (function() {
var scene, camera, cube, renderer; // CHANGED
var width = 600;
var height = 400;
var antialias = false;
var API = {}; // CHANGED
API.start = function() {
init();
animate();
return console.log('running!');
};
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, width / height, 1, 10000);
camera.position.y = 150;
camera.position.z = 700;
scene.add(camera);
cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshPhongMaterial({ // CHANGED
color: 0x00ff00
}));
cube.position.y = 150;
cube.castShadow = true;
scene.add(cube);
var ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({ // CHANGED
color: 0xe0e0e0
}));
ground.receiveShadow = true;
scene.add(ground);
var light = new THREE.SpotLight(0xffffff);
light.position.set(0, 1000, 0); // CHANGED
light.angle = Math.PI / 4; // CHANGED
light.target = cube; // CHANGED
light.castShadow = true;
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
light.shadowCameraNear = 100; // CHANGED
light.shadowCameraFar = 1100; // CHANGED
light.shadowCameraFov = 30;
light.shadowCameraVisible = true; // CHANGED
scene.add(light);
renderer = new THREE.WebGLRenderer({
antialias: antialias
});
renderer.setSize(width, height);
renderer.shadowMapEnabled = true;
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
return render();
}
function render() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
cube.rotation.x += 0.03;
camera.lookAt(scene.position);
return renderer.render(scene, camera);
}
return API;
})();
App.start();