Introduction
The Camera class is what we call an abstract class. You're not supposed to use it directly, but you can inherit from it to have access to common properties and methods. Some of the following classes inherit from the Camera class.
ArrayCamera
The ArrayCamera serves the purpose of rendering a scene multiple times by utilizing multiple cameras. Each of these cameras is responsible for rendering a designated portion of the canvas. This setup resembles split-screen multiplayer games from the past.
StereoCamera
The StereoCamera is employed to render a scene through two cameras, mimicking human eyes and generating a parallax effect that imparts a sense of depth. To witness this effect, appropriate equipment like VR headsets or red and blue glasses is necessary.
CubeCamera
The CubeCamera generates renders from various viewpoints (forward, backward, leftward, rightward, upward, and downward), capturing a comprehensive view of the surroundings. This output can be utilized for environment mapping, facilitating reflections and shadow maps, which will be discussed subsequently.
OrthographicCamera
The OrthographicCamera generates orthographic renders of a scene devoid of perspective distortion. This feature proves valuable for games like real-time strategy (RTS) titles, such as Age of Empires, where objects retain the same size on the screen, regardless of their distance from the camera.
PerspectiveCamera
Lastly, the PerspectiveCamera mimics real-world cameras, simulating perspective and offering a sense of depth, akin to what we encounter in reality.
PerspectiveCamera
In Perspective Camera class needs some parameters to be instantiated, but we didn't use all the possible parameters. Add the third and fourth parameters:
const camera = new THREE.PerspectiveCamera(fieldofview, Aspectratio, 1, 100)
Field of view
The first parameter called field of view corresponds to your camera view's vertical amplitude angle in degrees. If you use a small angle, you'll end up with a long scope effect, and if you use a wide angle, you'll end up with a fish eye effect because, in the end, what the camera sees will be stretched or squeezed to fit the canvas.
Aspect ratio
The second parameter is called aspect ratio and corresponds to the width divided by the height. While you might think that it's the canvas width by the canvas height and Three.js should calculate it by itself, it's not always the case if you start using Three.js in very specific ways. But in our case, you can simply use the canvas width and the canvas height.
Near and Far
Near and Far The third and fourth parameters, known as "near" and "far," determine the proximity and distance at which the camera can perceive objects. Any object or portion of an object situated closer to the camera than the defined "near" value or positioned farther away than the specified "far" value will not be visible in the rendered output.
This behavior is akin to what we observe in classic racing games, where trees and objects would appear to pop up in the distance as the player advanced.
Although it might be tempting to utilize extremely small values like 0.0001 or exceedingly large values like 9999999, this approach could lead to a phenomenon known as "z-fighting," wherein two surfaces seemingly compete to determine which one gets rendered above the other.
For practical implementation, it's advisable to opt for sensible values and only increase them when necessary. In our present scenario, we can opt for values like 0.1 for the near parameter and 100 for the far parameter.
Orthographic Camera
The OrthographicCamera deviates from the PerspectiveCamera in that it lacks perspective, resulting in objects maintaining consistent sizes irrespective of their proximity to the camera.
In contrast to the parameters required for the PerspectiveCamera, the OrthographicCamera demands a distinct set of inputs. Instead of specifying a field of view, you're required to define the extent to which the camera can see in each direction (left, right, top, and bottom). Following this, you can provide the near and far values, as we previously did for the PerspectiveCamera.
NOTE: The objects will have the same size regardless of their distance from the camera.
const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100)
The parameters you have to provide are very different from the PerspectiveCamera.
Instead of a field of view, you must provide how far the camera can see in each direction (left, right, top and bottom). Then you can provide the near and far values just like we did for the PerspectiveCamera.
TO UNDERSTAND IT MORE CLEARLY PLEASE LOOK INTO THE OFFICIAL DOCUMENTATION