var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshBasicMaterial({color: '#f00'});
var box = new THREE.Mesh(geometry, material);
scene.add(box);
// important, otherwise the camera will spin on the spot.
camera.position.z = 200;
var period = 5; // rotation time in seconds
var clock = new THREE.Clock();
var matrix = new THREE.Matrix4(); // Pre-allocate empty matrix for performance. Don't want to make one of these every frame.
render();
function render() {
requestAnimationFrame(render);
if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
// This stuff in here is just for auto-resizing.
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
// Create a generic rotation matrix that will rotate an object
// The math here just makes it rotate every 'period' seconds.
matrix.makeRotationY(clock.getDelta() * 2 * Math.PI / period);
// Apply matrix like this to rotate the camera.
camera.position.applyMatrix4(matrix);
// Make camera look at the box.
camera.lookAt(box.position);
// Render.
renderer.render(scene, camera);
}