Graphics Reference
In-Depth Information
To set up
THREE.PerspectiveCamera
completely, we need to perform a couple
of steps:
1. The first thing we need to do is instantiate the camera:
camera = new THREE.PerspectiveCamera();
This creates the camera instance, which we configure in the upcoming steps.
2. Now that we've got a camera, we first need to define the aspect ratio between
the width of the viewport and the height:
camera.aspect = window.innerWidth /
window.innerHeight;
In our recipe, we use the full width and height of the browser, so we specify
the aspect ratio for the camera based on the
window.innerWidth
and
window.innerHeight
properties. If we use a
div
element with a fixed
width and height, you should use the ratio between these values as the
as-
pect
function for the camera.
3. The next two properties we need to define are the
near
and
far
properties:
camera.near = 0.1;
camera.far = 1000;
These two properties define the area of the scene that this camera will
render. With these two values, the camera will render the scene starting from
a distance of
0.1
to a distance of
1000
from the position of the camera.
4. The last of the properties that can be defined is the (vertical) field of view:
camera.fov = 45;
This property defines, in degrees, the area that the camera
sees
. For in-
stance, humans have a horizontal field of view of 120 degrees, while in video
games, often a field of view of around 90 or 100 degrees is used.
