Cameras and Views in Three.js

In Three.js, cameras are used to define the perspective or orthographic projection through which the 3D scene is viewed. By properly configuring cameras and defining views, you can control the rendering of your 3D scenes and create immersive experiences for users.

1. Types of Cameras

Three.js supports different types of cameras, each suitable for specific rendering scenarios:

PerspectiveCamera: Mimics the way human eyes perceive objects in the real world, providing a sense of depth and perspective.
OrthographicCamera: Renders objects without perspective distortion, making it suitable for 2D and technical drawings.

Each type of camera has properties that can be adjusted to control factors such as field of view, aspect ratio, near and far clipping planes, and position.

2. Creating Cameras

To create a camera in Three.js, you can instantiate an instance of the desired camera type and configure its properties:

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

// Create an orthographic camera
const orthoCamera = new THREE.OrthographicCamera(-2, 2, 2, -2, 0.1, 100);
orthoCamera.position.set(0, 0, 5);

In this example, we create a perspective camera with a field of view of 75 degrees, an aspect ratio matching the window's width and height, and near and far clipping planes of 0.1 and 1000 units, respectively. We also set its position in the scene. Similarly, we create an orthographic camera with left, right, top, bottom, near, and far parameters defining the viewing volume.

3. Controlling Views

Views in Three.js determine what part of the 3D scene is visible from the camera's perspective. You can control views by adjusting the camera's position and orientation, as well as by using controls for user interaction, such as orbit controls or first-person controls.

Additionally, you can define multiple cameras and switch between them to create different viewing perspectives or rendering effects.

4. Example: Switching Cameras

Here's an example of creating and switching between perspective and orthographic cameras in a Three.js scene:

// Initialize both cameras
const perspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const orthoCamera = new THREE.OrthographicCamera(-2, 2, 2, -2, 0.1, 100);

// Set initial active camera
let activeCamera = perspectiveCamera;

// Switch between cameras (e.g., on user interaction)
function switchCamera() {
    activeCamera = (activeCamera === perspectiveCamera) ? orthoCamera : perspectiveCamera;
}

// Render loop
function render() {
    renderer.render(scene, activeCamera);
    requestAnimationFrame(render);
}
render();

In this example, we initialize both perspective and orthographic cameras and set the initial active camera to the perspective camera. We then define a function to switch between cameras, toggling between perspective and orthographic views. Finally, in the render loop, we render the scene using the active camera.

By understanding cameras and views in Three.js, you can create immersive 3D experiences and control how users interact with your scenes.

Archive