Chapter 107: DirectionalLightHelper

Core Idea

Helper object to assist with visualizing a DirectionalLight's effect on the scene. This consists of a plane and a line representing the light's position and direction.

When the directional light or its target are transformed or light properties are changed, it's necessary to call the update() method of the respective helper.

Key Concepts

• color : number | Color | string: The color parameter passed in the constructor. If not set, the helper will take the color of the light.
• light : DirectionalLight: The light being visualized.
• lightPlane : Line: Contains the line showing the location of the directional light.
• targetLine : Line: Represents the target line of the directional light.

Code Examples

const light = new THREE.DirectionalLight( 0xFFFFFF );
scene.add( light );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

• What it demonstrates: Typical usage of DirectionalLightHelper.

Reference Tables

Constructor

Signature
`new DirectionalLightHelper( light : DirectionalLight, size : number, color : number

Properties

Property	Description
`.color : number	Color
.light : DirectionalLight	The light being visualized.
.lightPlane : Line	Contains the line showing the location of the directional light.
.targetLine : Line	Represents the target line of the directional light.

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.
.update()	Updates the helper to match the position and direction of the light being visualized.

Key Takeaways

1. DirectionalLightHelper extends: EventDispatcher → Object3D
2. Most relevant properties: color, light, lightPlane, targetLine.
3. Key methods: dispose, update.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Source: src/helpers/DirectionalLightHelper.js