What is the ArrowHelper in three.js?

Three.js is a JavaScript library that is built on top of WebGL and is used for rendering animations on the web.

When creating a scene, the developer can use multiple built-in helpers to visualize some otherwise invisible aspects of the scene. In this Answer, we'll understand the use of the ArrowHelper. It is used to create a 3D arrow that helps visualize directions.

Syntax

Parameters

The constructor for ArrowHelper takes in the following parameters,

• direction: This is the direction in which we want our arrow to point. It is of type Vector3 and is normalized before passing it as a parameter using the .normalize() method. To read more on Vector3, please follow this link.

  • origin: This is the point in the plane from where we want our arrow to originate. This is also of type Vector3.

  • length: This defines the length of our arrow and is of type Number.

  • color: This is the color we want our arrow to be and is in a hexadecimal format.

Example

The example below uses the ArrowHelper along with the AxesHelper to visualize the direction and length of our arrow. To read more on AxesHelper, please follow this link. We have also set up OrbitControls for the scene. We can read about OrbitControls here.

Explanation

In the code above:

• Lines 38–39: We initialize the AxesHelper with a size of $3$.

• Line 42: We create a Vector3 and store it in direction after normalizing it. Normalizing a Vector3 makes its length $1$ while retaining its direction.

• Line 43: W set the origin of our arrow to coordinates $(0,0,0)$. This is the value set by default if no parameter is passed.

• Line 44: We set the length of our arrows equal to $3$ units.

• Line 45: We save the color we want our arrow to be in a hexadecimal format inside color.

• Line 46: We initialize ArrowHelper and pass all of the parameters explained above.

• Line 47: We add the arrow to the scene.