Graphics Reference
In-Depth Information
once again, internally uses matrix calculations to determine how to align the camera
to the scene).
There's more…
In this recipe, we rotated around the scene's
y
axis. This results in a very smooth
animation where the camera circles around the scene. We could, of course, also ap-
ply this to the other axes. We provided an example that you can view in the sources
provided with this topic. If you open
03.08-rotate-camera-around-scene-x-
axis.html
in your browser, the camera rotates around the
x
axis instead of the
y
axis.
The only change you have to make is change the calculations in the render loop:
function render() {
renderer.render(scene, camera);
var z = camera.position.z;
var y = camera.position.y;
camera.position.y = y *
Math.cos(control.rotSpeed) + z *
Math.sin(control.rotSpeed);
camera.position.z = z *
Math.cos(control.rotSpeed) - y *
Math.sin(control.rotSpeed);
camera.lookAt(scene.position);
requestAnimationFrame(render);
}
When you look at this example in your browser, you might notice something strange.
At a certain point, it'll look like the camera jumps around. The reason is that the cam-
era tries to stay the right-side up, so it quickly changes orientation when it is at the
top or bottom of its rotation.
