What is the DirectionalLightHelper in three.js?

What is three.js?

Three.js is a JavaScript library built on WebGL used for rendering animations on the web. It allows developers to create interactive websites that are impossible to create using typical front-end development frameworks.

When creating a scene in three.js, the developer must use the tools it offers to help create better animations and scenes. An example is the DirectionalLightHelper, which helps us visualize where the DirectionalLight is placed inside the scene, and where it points.

DirectionalLight is the light that emits parallel rays from a source point placed infinitely far away.

Note: The placement of the DirectionalLight doesn't matter as it is in the form of an infinite vector. The DirectionalLightHelper helps us visualize the direction of the DirectionalLight more than its position.

Syntax

The following is the syntax to initialize the DirectionalLightHelper:

Parameters

The constructor for the DirectionalLightHelper takes three parameters:

• light: This is the DirectionalLight object with which we want to use the DirectionalLightHelper.

• size: This is the size of the DirectionalLightHelper. It is optional, and the default value is $1$.

• color: This is the color we want the DirectionalLightHelper to have. This is also optional, and the default color is white.

Example

The example shown below makes use of the DirectionalLightHelper.

Note: In order to read more on how to set up a link in three.js, you can follow this link.

Explanation

The scene above uses Dat GUI to provide a controller to change the direction of the DirectionalLight. The explanation for the code is:

• Lines 38–42: We create and add a shape inside the scene. The DirectionalLight illuminates it.

• Lines 45–47: In these lines of code, we create the DirectionalLight.

• Lines 50–51: These lines of code initialize the DirectionalLightHelper and pass it directionalLight.

• Lines 54–57: Here, we set up dat.GUI and add a controller for the DirectionalLight's position along the $x, y,$ and $z$ axes.

• Lines 60: This line of code initializes OrbitControls. This is to help the user pan around the scene and view it from different angles.

Note: You can read more on the following components in their respective Answers.

• Dat GUI

• Orbit controls