Graphics Reference
In-Depth Information
camera.fov = fov;
camera.updateProjectionMatrix();
As Three.js caches the
fov
property of the camera, we need to inform
Three.js that the camera configuration has some changes. We do this with
the
updateProjectionMatrix
function.
At this point, the camera is completely zoomed in on the object.
How it works...
To understand how this works, we need to understand what the field of view property
of a
THREE.PerspectiveCamera
object does. The following figure shows you the
field of view property:
As you can see in this figure, there is a separate horizontal and vertical field of view.
Three.js only allows you to set the vertical one, and the horizontal field of view is de-
termined based on the aspect ratio you define on a camera. When you look at this
figure, you can also directly see how this recipe works. By changing the field of view,
we shrink the near and far planes and limit what is being rendered, and this way, we
can zoom in.
There's more…
There is an alternative way of zooming in besides the one shown here. Instead of
changing the
fov
property of the camera, we can also move the camera closer to
the object. In the latest version of Three.js, a
zoom
property is introduced; you can
also use this property to zoom in on a scene, but you can't use it directly to zoom in
on a single object.
