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