Chapter 321: CameraHelper

Core Idea

This helps with visualizing what a camera contains in its frustum. It visualizes the frustum of a camera using a line segments.

Based on frustum visualization in lightgl.js shadowmap example.

CameraHelper must be a child of the scene.

When the camera is transformed or its projection matrix is changed, it's necessary to call the update() method of the respective helper.

Key Concepts

camera : Camera: The camera being visualized.
pointMap : Object.<string, Array.<number>>: This contains the points used to visualize the camera.

Code Examples

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const helper = new THREE.CameraHelper( camera );
scene.add( helper );

What it demonstrates: Typical usage of CameraHelper.

Reference Tables

Constructor

Signature
`new CameraHelper( camera : Camera )`

Properties

Property	Description
`.camera : Camera`	The camera being visualized.
`.pointMap : Object.<string, Array.<number>>`	This contains the points used to visualize the camera.

Methods

Method	Description
`.dispose()`	Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
`.setColors( frustum : Color, cone : Color, up : Color, target : Color, cross : Color ) : CameraHelper`	Defines the colors of the helper.
`.update()`	Updates the helper based on the projection matrix of the camera.

Key Takeaways

CameraHelper extends: EventDispatcher → Object3D → Line → LineSegments
Most relevant properties: camera, pointMap.
Key methods: dispose, setColors, update.

Connects To

EventDispatcher: parent class
Object3D: parent class
Line: parent class
LineSegments: parent class
Source: src/helpers/CameraHelper.js