Three.js OrthographicCamera Zoom Property Explained

This article explains the zoom property of the OrthographicCamera in Three.js, detailing how it controls the scale of your 3D scene and how to implement it correctly in your code. Unlike a perspective camera which mimics real-world depth, an orthographic camera uses a parallel projection where object size remains constant regardless of distance. Controlling the apparent size of objects in this view relies heavily on the zoom property.

What is the Zoom Property?

In Three.js, the zoom property is a numeric factor that scales the camera’s viewing frustum. The default value of zoom is 1.

Because an orthographic camera does not have perspective foreshortening, you cannot “zoom in” by simply moving the camera closer to an object along the Z-axis. Moving the camera forward or backward only changes what gets clipped by the near and far planes, not the visual size of the rendered objects. To change the visual scale, you must adjust the camera’s frustum boundaries (left, right, top, and bottom) or use the zoom property.

How Zoom Scales the View

The zoom property acts as a multiplier that alters the camera’s projection matrix. Mathematically, Three.js divides the camera’s frustum dimensions by the zoom factor:

\[\text{Effective Width} = \frac{\text{right} - \text{left}}{\text{zoom}}\] \[\text{Effective Height} = \frac{\text{top} - \text{bottom}}{\text{zoom}}\]

Zoom > 1 (Zooming In): If you set zoom to 2, the camera’s effective viewing window becomes half its original size. Because the same render target (the canvas) now displays a smaller area of the 3D world, objects appear twice as large.
Zoom < 1 (Zooming Out): If you set zoom to 0.5, the viewing window doubles in size, capturing a larger area of the scene. Consequently, objects appear half their original size.
Zoom = 1 (Default): The camera renders the scene using the exact coordinates defined by its left, right, top, and bottom frustum planes.

How to Apply Zoom in Code

To change the zoom level of an OrthographicCamera, you modify its .zoom property directly. However, changing this property does not automatically update the camera’s internal mathematics. You must call camera.updateProjectionMatrix() immediately afterward for the changes to render on the screen.

// 1. Create the OrthographicCamera
const aspect = window.innerWidth / window.innerHeight;
const d = 5;
const camera = new THREE.OrthographicCamera(
    -d * aspect, // left
     d * aspect, // right
     d,          // top
    -d,          // bottom
     1,          // near
     1000        // far
);

// 2. Adjust the zoom level (e.g., zoom in by 2x)
camera.zoom = 2;

// 3. Crucial step: Update the projection matrix
camera.updateProjectionMatrix();

Without calling camera.updateProjectionMatrix(), the visual output will remain unchanged because the GPU will continue using the old projection calculations.