Graphics Reference
In-Depth Information
/ window.innerHeight, 0.1, 1000);
// position and point the camera to the
center of the scene
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);
2. To rotate the camera, we recalculate its position in the render loop as follows:
function render() {
renderer.render(scene, camera);
var x = camera.position.x;
var z = camera.position.z;
camera.position.x = x *
Math.cos(control.rotSpeed) + z *
Math.sin(control.rotSpeed);
camera.position.z = z *
Math.cos(control.rotSpeed) - x *
Math.sin(control.rotSpeed);
camera.lookAt(scene.position);
requestAnimationFrame(render);
}
In this render function, we update the camera.position.x and cam-
era.position.z variables, and by calling cam-
era.lookAt(scene.position) , we make sure we keep looking at the
center of the scene.
How it works...
What we do here is some basic vector math. We execute a very small rotation of
the camera using a rotation matrix. However, instead of the 3D and 4D matrices we
used in other recipes, we just use a 2D matrix this time (represented with the two
calculations in the render loop). After the rotation, we just need to make sure the
camera is still looking at the correct position, so we use the lookAt function (which
Search WWH ::




Custom Search