Cameras

Understanding Cameras in Three.js

A camera in Three.js is your viewport into the scene. Without it, the renderer has no way to know what part of your 3D world to display. Three.js offers several camera types, but the two most common are PerspectiveCamera and OrthographicCamera.

PerspectiveCamera

This is the camera you'll use most often. It mimics how human eyes perceive the world - objects farther away appear smaller. This is called perspective projection.

// PerspectiveCamera(fov, aspect, near, far)
const camera = new THREE.PerspectiveCamera(
  75,                           // Field of view (degrees)
  sizes.width / sizes.height,   // Aspect ratio
  0.1,                          // Near clipping plane
  100                           // Far clipping plane
);
camera.position.z = 5;
scene.add(camera);

The key parameters are:

• FOV (Field of View) - The vertical angle of the camera's view in degrees. Higher values = wider view, more distortion at edges.
• Aspect Ratio - Width divided by height. Should match your canvas dimensions.
• Near/Far - Objects closer than near or farther than far won't be rendered.

OrthographicCamera

An orthographic camera removes perspective distortion entirely. Objects remain the same size regardless of distance. This is useful for 2D games, UI elements, or isometric views.

// OrthographicCamera(left, right, top, bottom, near, far)
const aspectRatio = sizes.width / sizes.height;
const frustumSize = 3;
const camera = new THREE.OrthographicCamera(
  -frustumSize * aspectRatio,   // Left
  frustumSize * aspectRatio,    // Right
  frustumSize,                  // Top
  -frustumSize,                 // Bottom
  0.1,                          // Near
  100                           // Far
);
camera.position.z = 5;
scene.add(camera);

Notice how in the orthographic view above, the cubes don't get smaller as they move away from the camera - they all appear the same size.

Camera Position and LookAt

You can position the camera anywhere in 3D space and point it at any target:

// Position the camera
camera.position.set(3, 2, 5);

// Point the camera at a specific position
camera.lookAt(0, 0, 0);

// Or point at an object
camera.lookAt(mesh.position);

In the examples above, the camera orbits around the scene so you can see how position affects the view.