---
tags: engineering/three.js, three.js, camera
author: Nguyen Dinh Nam
date: 2022-09-13
---

This article gives basic information about characteristics of the frequently used types of camera in three.js.

Three.js is a JavaScript 3D library that allows developers to program and describe data in 3 dimensions, and then convert them into 2 dimensions and display them on HTML canvas. **Camera** is one of the core elements of a three.js project, beside Scene, Renderer and 3D objects.

## Most frequently used types of three.js camera

You cannot use the `Camera` class directly to initialize a new camera in three.js. Instead, use the `PerspectiveCamera` or `OrthographicCamera` specifically. The image below shows the object viewed in perspective camera (upper) and in orthographic camera (lower).


Place them into the Oxyz coordinate...


### Perspective camera


Some crucial attributes:
- **fov** (Field of view): Camera frustum vertical field of view, i.e. the angle of the view in the yOz plane, in degree. Think of panorama and binoculars and you can understand this concept.
- **near** and **far**: Clipping planes at 2 points on the z axis. Note that objects with z position outside the `(near, far)` interval will not be displayed.

const camera = new THREE.PerspectiveCamera(45, 16 / 9, 1, 1000);
scene.add(camera);

In the example above, a perspective camera is initialized with `fov` equals 45 degree, `aspect-ratio` of 16 / 9, `near` and `far` are 1 and 1000 respectively.

Perspective camera visualization with [`CameraHelper`](https://threejs.org/docs/index.html?q=camera#api/en/helpers/CameraHelper) from [r105.threejsfundamentals.org](https://r105.threejsfundamentals.org/threejs/threejs-cameras-perspective-2-scenes.html):

<iframe height="400" style="width: 100%;" scrolling="no" title="Three.js - Cameras - Perspective 2 views" src="https://codepen.io/nguyend-nam/embed/abGmYBp?default-tab=result" frameborder="no" allowfullscreen="true"></iframe>

### Orthographic camera


Some crucial attributes:
- **top**, **right**, **bottom** and **left**: Vertical and horizontal position of 4 vertices of the view. Each side also presents a clipping plane as for **near** and **far**.
- **near** and **far**: Same as for perspective camera.

const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 1000);
scene.add(camera);

In the example above, an orthographic camera is initialized with `left`, `right`, `top` and `bottom` are -1, 1, 1 and -1 respectively. The last 2 numbers represent `near` and `far`.

Orthographic camera visualization with [`CameraHelper`](https://threejs.org/docs/index.html?q=camera#api/en/helpers/CameraHelper) from [r105.threejsfundamentals.org](https://r105.threejsfundamentals.org/threejs/threejs-cameras-orthographic-2-scenes.html):

<iframe height="400" style="width: 100%;" scrolling="no" title="Three.js - Cameras - Perspective 2 views" src="https://codepen.io/nguyend-nam/embed/BaxLrWv?default-tab=result" frameborder="no" allowfullscreen="true"></iframe>

## Other types of camera
Beside those 2 most frequently used types of camera, three.js also provides various of camera type options:
- [ArrayCamera](https://threejs.org/docs/index.html?q=camera#api/en/cameras/ArrayCamera)
- [CubeCamera](https://threejs.org/docs/index.html?q=camera#api/en/cameras/CubeCamera)
- [StereoCamera](https://threejs.org/docs/index.html?q=camera#api/en/cameras/StereoCamera)

## Reference
- https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera
- https://r105.threejsfundamentals.org/threejs/lessons/threejs-cameras.html
- https://www.vectorstock.com/royalty-free-vector/isometric-and-perspective-drawings-vector-7297379
- https://wiki.freecadweb.org/index.php?title=File:Orthographic_Perspective.gif



<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 4C4.22349 4 4 4.2238 4 4.49958V12.2286V14V16V17C4 18.6569 5.34315 20 7 20C8.84895 20 10.3478 18.5011 10.3478 16.6522V16.0495C10.3478 15.4699 10.8177 15 11.3973 15H15V5C15 4.44772 14.5523 4 14 4H4.5ZM2 12.2286V14V16V17V17.1143H2.00128C2.06203 19.8229 4.27677 22 7 22H16C19.2734 22 22 19.3488 22 16.0495C22 15.4699 21.5301 15 20.9505 15H17V5C17 3.34315 15.6569 2 14 2H4.5C3.11966 2 2 3.1185 2 4.49958V12.2286ZM11.1705 20H16C17.8636 20 19.4464 18.7155 19.8816 17H17H16.5H12.3367C12.264 18.132 11.8392 19.1681 11.1705 20ZM10.4998 6C10.4998 5.44772 10.052 5 9.49976 5C8.94747 5 8.49976 5.44772 8.49976 6V6.35632C7.36915 6.5179 6.5 7.49018 6.5 8.66546C6.5 9.95379 7.5444 10.9982 8.83273 10.9982H10.1691C10.3529 10.9982 10.5018 11.1472 10.5018 11.3309C10.5018 11.5147 10.3529 11.6637 10.1691 11.6637H7.83349C7.2812 11.6637 6.83349 12.1114 6.83349 12.6637C6.83349 13.2159 7.2812 13.6637 7.83349 13.6637H8.49976V13.9964C8.49976 14.5487 8.94747 14.9964 9.49976 14.9964C10.052 14.9964 10.4998 14.5487 10.4998 13.9964V13.6404C11.6315 13.4798 12.5018 12.507 12.5018 11.3309C12.5018 10.0426 11.4574 8.99819 10.1691 8.99819H8.83273C8.64897 8.99819 8.5 8.84923 8.5 8.66546C8.5 8.4817 8.64897 8.33273 8.83273 8.33273H11.1683C11.7206 8.33273 12.1683 7.88502 12.1683 7.33273C12.1683 6.78045 11.7206 6.33273 11.1683 6.33273H10.4998V6Z" fill="#1B3FE4"/>
</svg>