Exploring Cameras in Three.js

Cameras play a vital role in creating immersive and interactive 3D scenes in web development. When it comes to working with Three.js, a powerful JavaScript library for 3D rendering, cameras are essential for controlling the perspective and view of the scene.

In this blog post, we will look into the various types of cameras available in Three.js and understand their implementation and usage.

Types of Cameras:

1. PerspectiveCamera:

The PerspectiveCamera is the most commonly used camera in Three.js. It mimics the perspective projection of real-world cameras, creating a sense of depth and realism in the scene. So that the objects far from the camera look smaller and those near to the camera look bigger, just like our eyes work.

Field of View

Here’s an example of how to create and position a PerspectiveCamera:

const camera = new THREE.PerspectiveCamera(
  fov,     // Field of View
  aspect,  // Aspect Ratio
  near,    // Near Clipping Plane
  far      // Far Clipping Plane
);

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

2. OrthographicCamera:

The OrthographicCamera provides an orthographic projection, which means that objects appear the same size regardless of their distance from the camera. This camera type is often used for 2D games or architectural visualizations.

Here’s an example of creating an OrthographicCamera:

const camera = new THREE.OrthographicCamera(
  left,    // Left Frustum Plane
  right,   // Right Frustum Plane
  top,     // Top Frustum Plane
  bottom,  // Bottom Frustum Plane
  near,    // Near Clipping Plane
  far      // Far Clipping Plane
);

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

3. CubeCamera:

The CubeCamera is used for capturing a panoramic view of the scene from a specific position. It renders the scene six times, each time capturing the view along one of the cube’s faces. This camera type is commonly used for creating reflections or environment maps. Here’s an example of creating and updating a CubeCamera:

const cubeCamera = new THREE.CubeCamera(near, far, resolution);
cubeCamera.position.set(x, y, z);

scene.add(cubeCamera);
cubeCamera.update(renderer, scene);

4. ArrayCamera:

The ArrayCamera allows you to create an array of cameras and switch between them to achieve different perspectives or views. It can be useful for creating multi-camera setups or implementing camera transitions. Here’s an example of creating an ArrayCamera:

const cameras = [
  new THREE.PerspectiveCamera(fov, aspect, near, far),
  new THREE.PerspectiveCamera(fov, aspect, near, far)
];

const camera = new THREE.ArrayCamera(cameras);

5. StereoCamera:

The StereoCamera is used to create stereoscopic 3D effects, providing a sense of depth perception by rendering separate views for the left and right eye. This camera type is commonly used for virtual reality (VR) or augmented reality (AR) applications.

Here’s an example of creating a StereoCamera:

const camera = new THREE.StereoCamera();

// Set up left and right cameras
const leftCamera = camera.cameraL;
const rightCamera = camera.cameraR;

// Position the cameras
leftCamera.position.set(x, y, z);
rightCamera.position.set(x, y, z);

// Set the focal length for both cameras
leftCamera.focalLength = 10;
rightCamera.focalLength = 10;

To render the stereo view, you need to update the camera and render the scene twice, once for the left eye and once for the right eye. Here’s an example of rendering with a StereoCamera:

// Update the stereo camera
camera.update(renderer, scene);

// Set the active renderer to the left eye
renderer.setRenderTarget(renderer.getRenderTarget().left);
renderer.render(scene, leftCamera);

// Set the active renderer to the right eye
renderer.setRenderTarget(renderer.getRenderTarget().right);
renderer.render(scene, rightCamera);

// Reset the active renderer to the default
renderer.setRenderTarget(null);

Understanding the different types of cameras available in Three.js is crucial for controlling the view and perspective of your 3D scenes. Whether you need to create a realistic perspective, an orthographic projection, or capture panoramic views, Three.js offers a variety of camera options to suit your needs. By utilising these cameras, you can enhance the interactivity and immersion of your web-based 3D applications.

Remember to experiment with camera settings, position, and movement to achieve the desired effects and create captivating user experiences. Happy coding!

Note: The code snippets provided in this blog post serve as a basic guide. Please refer to the official Three.js documentation for comprehensive usage and further customisation options.