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.
The syntax for initializing ArrorHelper and creating a 3D arrow inside the scene is given below:
const arrowHelper = new THREE.ArrowHelper(direction, origin, length, color);
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.
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.
In the code above:
Lines 38–39: We initialize the AxesHelper with a size of
Line 42: We create a Vector3 and store it in direction after normalizing it. Normalizing a Vector3 makes its length
Line 43: W set the origin of our arrow to coordinates
Line 44: We set the length of our arrows equal to
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.
Free Resources