Camera

Thu, 05 Oct 2023 12:50:02 GMT — Properties

---

In the context of three.js, a camera defines what the user sees when they look at a 3D scene. It determines the perspective, position, and orientation of the view. Cameras in three.js work similarly to real-world cameras, allowing you to control how the scene is viewed and rendered on the screen. There are several types of cameras in three.js, including PerspectiveCamera, OrthographicCamera, and others, each suited for different purposes.

Frustum

In the context of computer graphics and three.js, the camera frustum represents the viewable portion of the 3D scene. It is a geometric shape that resembles a pyramid with its top chopped off. The frustum defines what can be seen (the viewable area) from a particular camera position and orientation.

Types of Camera

In three.js, cameras are essential for rendering 3D scenes. They define what part of the 3D world will be rendered to the 2D screen. Different types of cameras are available to cater to various use cases and perspectives. Here are the primary types of cameras in three.js and their uses:

1. PerspectiveCamera:
   • Usage: This is the most common type of camera used in 3D graphics. It mimics the way the human eye sees the world, with objects appearing smaller as they move farther away from the viewer.
   • How to Use: To create a perspective camera, you define the field of view (FoV) which represents the vertical extent of the scene visible in the camera. You also specify the aspect ratio (usually the width of the viewport divided by the height) and the near and far clipping planes, which determine the range of distances that are visible to the camera.
   • Example:

   const camera = new PerspectiveCamera(FOV, aspectRatio, near, far);
   

2. OrthographicCamera:
   • Usage: An orthographic camera renders objects with a constant size, regardless of their distance from the camera. It's often used in technical or architectural visualization where maintaining object size is essential.
   • How to Use: You define the size of the visible area (top, bottom, left, right) along with the near and far planes.
   • Example:

   const camera = new OrthographicCamera(left, right, top, bottom, near, far);
   

3. CubeCamera:
   • Usage: A cube camera captures images in six directions (up, down, left, right, front, back) and is useful for environment mapping, creating cube maps for reflections, or panoramic views.
   • How to Use: You create a cube camera specifying the field of view and the near and far planes. After rendering the scene from the cube camera's six directions, you can use these images for different rendering purposes.
   • Example:

   const cubeCamera = new CubeCamera(near, far, resolution);
   cubeCamera.update(renderer, scene);
   

4. ArrayCamera:
   • Usage: An array camera allows multiple cameras to render the scene simultaneously, creating split-screen or multi-view rendering effects.
   • How to Use: You provide an array of individual cameras, and each camera's view is rendered on a portion of the screen.
   • Example:

   const cameras = [camera1, camera2, camera3]; // Array of individual cameras
   const arrayCamera = new ArrayCamera(cameras);
   

5. StereoCamera:
   • Usage: A stereo camera is used for creating stereoscopic 3D effects. It contains left and right cameras that capture slightly different views, enhancing the perception of depth.
   • How to Use: You provide left and right cameras, and the stereo camera calculates appropriate projections for each eye.
   • Example:

   const leftCamera = new PerspectiveCamera();
   const rightCamera = new PerspectiveCamera();
   const stereoCamera = new StereoCamera(leftCamera, rightCamera);
   

Each type of camera serves specific purposes, and the choice depends on the requirements of your 3D application. Perspective cameras are the most common choice for general 3D scenes, while orthographic cameras are suitable for technical illustrations or games where object size consistency is essential. Cube cameras are valuable for environment mapping, array cameras enable split-screen effects, and stereo cameras provide stereoscopic 3D experiences. By understanding these camera types, developers can effectively control the view and perspective of their three.js scenes.

Scene Graph

In three.js, the camera is not technically part of the scene graph. The scene graph is a hierarchical structure that represents the spatial relationships and transformations between objects in a 3D scene. It includes objects like meshes, lights, and other entities, organized in a tree-like structure. The transformations applied to parent nodes in the scene graph affect their children, allowing for complex transformations and animations.

The camera, on the other hand, is not a child object within the scene graph. Instead, the camera is used to view the scene graph. When you render the scene, you pass the camera as a parameter to the rendering process. The renderer uses the camera's properties (such as its position, orientation, and projection matrix) to determine what part of the scene to render and how to project the 3D objects onto the 2D screen.

While the camera itself is not a node in the scene graph, its properties can be changed dynamically, allowing for different views and perspectives of the scene. For example, you can update the camera's position and look-at direction to simulate camera movement within the scene. These changes affect how the scene is rendered without altering the actual objects in the scene graph.

In summary, while the camera is a crucial component in rendering a three.js scene, it is not a node within the scene graph itself. Instead, it acts as a viewpoint through which the scene graph is rendered onto the screen.

Back to top