Overview

If you are diving into the world of 3D graphics and interactive web application, understanding the camera in Three.js is essential. Camera determines how you view and interact with your 3D scenes. In this post, we will demystify the camera in Three.js, explaining its types, properties, and how to use it effectively to create stunning 3D experiences.

Types of Cameras in Three.js

Three.js offers several types of cameras, each serving specific purposes. Here are the most commonly used ones:

PerspectiveCamera: This is the default camera type in Three.js and is used for most 3D scenes. It mimics the human eye, providing perspective and depth. Objects closer to the camera appear larger while those farther away appear smaller.

OrthographicCamera: Unlike the PerspectiveCamera, the OrthographicCamera doesn't provide perspective. It's often used for technical or architectural visualizations, where all objects maintain their relative size, regardless of their distance from the camera.

CubeCamera: This camera captures six images in all directions (up, down, left, right, front, and back) to create cube maps for reflections and environment mapping.

Camera Properties

Regardless of the camera type, Three.js cameras share some common properties and settings:

Position: The position property determines the camera's location in 3D space. You can set it as follows:

camera.position.set(x, y, z);

Field of View (FOV): The fov property controls the camera's field of view, which determines how wide the view frustum is. Smaller FOV values creates a narrow view, while larger values result in a wider view.

Aspect Ratio: The aspect property defines the camera's aspect ration, usually calculated as the width divided by the height of the rendering window.

Near and Far Clipping Planes: The near and far properties define the distances at which the objects are clipped from view. Anything closer to the camera than near or farther than far won't be visible.

LookAt: The lookAt method allows you to specify a point for the camera to look at. It's particularly useful for focusing the camera on a specific object or position in your scene.

Viewport: When working with multiple viewports in a single canvas, you can set the viewport property to control which part of the canvas the camera renders to.

Using Cameras in Three.js

To work with cameras in Three.js, you typically follow these steps:

Create a Camera:

Depending on your scene's requirements, create an instance of one of the camera types mentioned earlier. For example:

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

Position the Camera:

Set the camera's position and, if needed, use the lookAt method to orient it toward a specific point.

Add Camera to Scene:

To render your scene from the camera's perspective, add the camera to the scene:

scene.add(camera);

Rendering from the Camera:

In your render loop, use the camera to render the scene:

renderer.render(scene, camera);