Orthographic vs Perspective Camera in Three.js

In Three.js, rendering a 3D scene onto a 2D screen requires a camera, with PerspectiveCamera and OrthographicCamera being the two primary options. This article explains the fundamental differences between these camera types, how their mathematical projections alter visual depth, and how to choose the right one for your WebGL project.

PerspectiveCamera: Realistic 3D Depth

The PerspectiveCamera mimics the behavior of the human eye and real-world cameras. It projects the 3D scene using perspective projection, meaning that objects appear smaller as they get further away from the camera.

Parallel lines (like railway tracks) will appear to converge at a distant vanishing point. This creates a natural sense of depth and scale, which is essential for realistic 3D environments.

Parameters

To define a PerspectiveCamera, you use a viewing volume shaped like a pyramid with the top cut off, known as a frustum:

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

• FOV (Field of View): The vertical angle of the camera’s view (in degrees). A wider angle lets you see more of the scene but can distort the edges.
• Aspect Ratio: Typically the width of the canvas divided by its height.
• Near: The closest distance at which objects are rendered.
• Far: The furthest distance at which objects are rendered.

Best Used For

• First-person and third-person 3D games.
• Architectural walk-throughs and realistic virtual tours.
• General 3D scenes where depth perception is crucial.

OrthographicCamera: Constant Scale and Precision

The OrthographicCamera renders objects using parallel projection. In this projection mode, an object’s size remains constant on the screen regardless of its distance from the camera.

There is no perspective foreshortening, and parallel lines always remain perfectly parallel. This eliminates realistic depth perception but provides highly accurate geometric proportions.

Parameters

The viewing volume of an OrthographicCamera is a rectangular box rather than a frustum:

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

• Left, Right, Top, Bottom: The boundaries of the camera’s rendering box. Adjusting these parameters scales the view.
• Near: The closest rendering limit.
• Far: The furthest rendering limit.

Best Used For

• Isometric games (such as tactical RPGs or city builders).
• 2D games and user interface overlays (HUDs).
• CAD (Computer-Aided Design) software and modeling tools where precise measurements are required.

Key Differences At a Glance

Code Comparison

Setting up a basic scene with each camera highlights how their setup differs due to their frustum shapes.

Setting up a PerspectiveCamera

const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);
camera.position.set(0, 0, 10);

Setting up an OrthographicCamera

Because the orthographic camera uses fixed unit boundaries, you must factor in the aspect ratio manually to prevent visual stretching:

const aspect = window.innerWidth / window.innerHeight;
const frustumSize = 10;

const camera = new THREE.OrthographicCamera(
  (frustumSize * aspect) / -2, // Left
  (frustumSize * aspect) / 2,  // Right
  frustumSize / 2,             // Top
  frustumSize / -2,            // Bottom
  0.1,                         // Near
  1000                         // Far
);
camera.position.set(0, 0, 10);