Three.js - Cameras

Three.js - Cameras

In Three.js, the camera is your eye into the 3D world. It determines what you see and from what perspective. Just like a real-world director chooses a camera to film a scene, you’ll choose a Three.js camera to render your scene. Let’s explore the most common types.

Primary Camera Types

Three.js offers several camera types, but two of them are used in the vast majority of projects.

Camera Type	Description & Use Case
PerspectiveCamera	This is the most common camera, designed to mimic how the human eye sees. Objects that are further away appear smaller. It’s defined by a frustum, a pyramid-like viewing volume. Key Parameters: - fov (Field of View): The vertical extent of the scene that is seen, in degrees. - aspect: The aspect ratio (width / height), crucial for preventing distortion. - near: The near clipping plane. Anything closer won’t be rendered. - far: The far clipping plane. Anything further won’t be rendered. Best for: Most 3D applications, games, and realistic scenes.
OrthographicCamera	This camera renders a scene without perspective. All objects appear at the same scale regardless of their distance from the camera. It’s defined by a box-shaped viewing volume. Key Parameters: - left, right, top, bottom: The boundaries of the viewing box. - near, far: The clipping planes, same as PerspectiveCamera. Best for: 2D games, isometric views (e.g., strategy games), architectural blueprints, and UI elements.

Making the Camera Follow an Object

A common requirement is to have the camera track a moving object. The simplest way is to use the camera.lookAt() method within your animation loop. This forces the camera to point towards a specific Vector3 position in every frame.

import * as THREE from 'three';

// Assuming you have a scene, a camera, and a target object (e.g., a sphere)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
scene.add(sphere);

// Set initial camera position
camera.position.set(0, 5, 10);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    // Example: Move the sphere
    sphere.position.x = Math.sin(Date.now() * 0.001) * 5;

    // Make the camera look at the sphere's current position
    camera.lookAt(sphere.position);

    renderer.render(scene, camera);
}

Best Practices and Advanced Techniques

• Smooth Following: Directly using lookAt() can feel rigid. For smoother, more cinematic tracking, you can interpolate the camera’s position and target. Use camera.position.lerp(targetPosition, alpha) to smoothly move the camera itself.
• User Controls: For most applications, you’ll want to give the user control. The OrbitControls addon is an essential tool that provides out-of-the-box orbit, zoom, and pan functionalities. You can easily import it from three/addons/controls/OrbitControls.js.
• Managing Aspect Ratio: Always update the camera’s aspect property and call camera.updateProjectionMatrix() whenever the viewport size changes to avoid skewed or stretched visuals. This is a key part of creating a responsive scene.