Course outline

Topic 7.1Intermediate ~21 min · step 1 of 6

Perspective and Orthographic Cameras

In one line

A camera sees a shape in space, its frustum. A perspective camera sees a pyramid, so far things look small; an orthographic camera sees a box, so size never changes with distance. Field of view acts as the zoom, and the aspect must follow the window.

0/6 · 0%

Think of it like this

Stand in a long corridor and look down it. The far end looks small and the walls seem to meet. That is a perspective view, the way your eyes and a phone camera see. Now think of an architect's floor plan: a 3 m wall is drawn the same size wherever it is. That is an orthographic view.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

frustum: The region of space a camera sees: a pyramid with its tip cut off (perspective), or a box (orthographic). Anything outside is skipped.
field of view (fov): The angle the camera sees from the bottom of the picture to the top, in degrees. Smaller means more zoomed in.
aspect: The picture's width divided by its height, for example 16 / 9 = 1.78.
perspective: Far things look smaller and parallel lines seem to meet, as in a photo.
orthographic: No perspective: an object has the same size at every distance, as in a technical drawing.
projection matrix: The 4 × 4 matrix, built from fov, aspect, near and far, that turns camera space into the clip space of Topic 1.4. updateProjectionMatrix() rebuilds it.

Step by step

01Look at a frustum from outside

In the widget, drag the sliders. Watch the five posts (1, 3, 5, 8 and 12 m away) enter and leave the pyramid, and the count above the camera's own picture change. Then switch to orthographic and see the pyramid become a box.

02Turn fov into metres

Run the first example. It prints how much of the world a camera sees 5 m away for three angles, and counts the post centres inside each frustum. The formula 2 · d · tan(fov / 2) gives the 1.76, 4.66 and 10.00 metres.

03Compare the two cameras

The second example draws three boxes at 3, 6 and 12 m. With the perspective camera their heights in the picture are 0.916, 0.458 and 0.229 (halving as distance doubles). With the orthographic camera they are all 0.500.

04Change the window's shape

The same example's last three lines follow one point, 1 m to the right, while the window goes from square to twice as wide. With the old matrix the point stays at x = 0.549, so the picture is stretched. After camera.aspect = 2 and updateProjectionMatrix() it moves to x = 0.275: the wider window now shows more of the world, so the same point sits nearer the centre.

Try it yourself

1
Zoom with the angle
In "Field of view as zoom", set FOV to 20: the middle post fills about 60% of the height and the posts 2 m to each side show only as slivers at the edges. Set FOV to 90: all five posts appear, small, with their sides visible. The printed table does not change, because it uses its own three angles.
2
Switch cameras
In the second example set ORTHOGRAPHIC to true. The three boxes become equal in size and the console prints 0.500 three times. The camera sees 4 m from top to bottom at every distance, so a 1 m box takes a quarter of the height, which is 0.5 of the −1 to 1 picture.

Code & diagrams

Try it: interactive

The frustum, from outside

Move fov, near and far, then switch to orthographic. Which posts are inside, and what height is visible at 5 m?

Field of view as zoom New tab

The picture uses FOV; the printed table always compares 20, 50 and 90 degrees with a picture twice as wide as tall.

idle

Console

Run the scene to see its console.

Expected console output

fov 20: sees 1.76 m tall and 3.53 m wide at 5 m, 1 of 5 post centres
fov 50: sees 4.66 m tall and 9.33 m wide at 5 m, 5 of 5 post centres
fov 90: sees 10.00 m tall and 20.00 m wide at 5 m, 5 of 5 post centres

Perspective or orthographic, and a window that changes shape New tab

Set ORTHOGRAPHIC to true to compare. The last three lines show why updateProjectionMatrix() matters.

idle

Console

Run the scene to see its console.

Expected console output

box at 3 m: height in the picture 0.916
box at 6 m: height in the picture 0.458
box at 12 m: height in the picture 0.229
window 1:1, a point 1 m to the right is at x = 0.549
aspect set, projection not updated: x = 0.549 (stale, picture stretched)
after updateProjectionMatrix():     x = 0.275

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

An orthographic camera that ignores the window

In the second example set ORTHOGRAPHIC to true and change -half * aspect, half * aspect, half, -half to -half, half, half, -half.

terminal

$ Run

── what you'll see ──

no error: the three 1 m boxes look wider than tall (1.6 times in a 640 × 400 canvas, the canvas's own aspect) and the outer two touch the left and right edges

Break #2

A field of view of 180

In the first example set FOV to 180.

terminal

$ Run

── what you'll see ──

no error: the canvas is empty, only the dark background

Myth vs fact

Myth

A bigger field of view moves the camera back.

Fact

The camera stays where it is. A bigger angle only lets it see more, so each thing takes less of the picture, and the perspective gets stronger at the edges.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
fov is vertical in three.js. A wide window therefore sees more sideways without any change to fov. CSS and film people often quote a horizontal angle. The conversion is h = 2 · atan(tan(v / 2) · aspect), used in Topic 7.4.
▸
camera.zoom exists on both cameras. For a perspective camera it narrows the effective field of view (getEffectiveFOV()), handy for a zoom that doesn't move the camera; OrbitControls uses it for orthographic cameras.

Remember this

1
The problem this solves: the camera decides what is on screen and how big it looks. If you do not choose its numbers on purpose, you get a bike that looks stretched, a showroom that looks like a fish-eye photo, or an empty screen with no error message.
2
The frustum. A camera sees only a region of space, shaped like a pyramid with its tip cut off (a frustum). Its sides are the edges of the picture. Its two ends are the near and far planes. Anything outside is not drawn. The widget below shows it from outside.
3
Field of view is the zoom. PerspectiveCamera(fov, aspect, near, far) takes fov in degrees, measured from the bottom of the picture to the top (vertical). At distance d the camera sees a height of 2 · d · tan(fov / 2). At 5 m, 20° sees 1.76 m, 50° sees 4.66 m and 90° sees 10 m. A small angle zooms in; a large one shows more, smaller, stretched at the edges. Product viewers use 30 to 50.
4
Aspect is the shape of the window. aspect is width divided by height. The visible width is the visible height times the aspect. When the window changes shape you must set camera.aspect and then call camera.updateProjectionMatrix(), which rebuilds the matrix from the numbers. A changed number alone changes nothing on screen.
5
Orthographic cameras. OrthographicCamera(left, right, top, bottom, near, far) is a box measured in world units. Distance changes nothing: three 1 m boxes at 3, 6 and 12 m all take the same space. It is the right camera for diagrams, technical drawings, isometric games and shadow maps (a directional light's shadow camera is orthographic, Topic 5.5). To follow the window you must change left and right to match the aspect.
6
Bad numbers do not throw. fov 0, aspect 0 or near equal to far fill the projection matrix with Infinity or NaN, and the scene silently disappears. Check the numbers, not three.js, first.

Explain it without notes

At 4 m, how much height does a camera with fov = 40 see, and what changes if the window gets twice as wide?

When would you choose an orthographic camera in the showroom?

Practice

Write visibleHeight(fov, distance) and use it to find the fov that shows exactly 2 m of height at 4 m.

A camera is new THREE.PerspectiveCamera(50, 1.5, 0.1, 100). The window becomes 800 × 800. Write the two lines that fix the camera.

Done when you can

Work out the visible height at any distance from fov
Say why a camera's aspect and projection matrix must be updated on resize
Choose between perspective and orthographic for a task and say why
Spot a camera with an impossible number from its projection matrix

Command Palette