What is AxesHelper in three.js?

AxesHelper in JavaScript

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

When creating a scene, the developers use multiple built-in helpers to visualize some otherwise invisible aspects of the scene. In this Answer, we'll make use AxesHelper to visualize the $x, y$, and $z$ axes.

Example

The example below illustrates the use of AxesHelper. The scene is also initialized with OrbitControls so the camera can be panned around to view the scene from different angles. To read more on OrbitControls, please follow this link.https://www.educative.io/answereditor/5620263807090688

Explanation

The scene above consists of AxesHelper and a sphere that we place at the coordinates $(1,1,1)$ to visualize a point in the plane.

• Line 35: This line of code initializes the OrbitControls.

• Lines 38–42: In these lines of code, we create a sphere shape and set its position according to the desired coordinates.

• Line 46: We initialize our AxesHelper and store the returned instance inside helper.

• Line 47: We add helper to the scene so that we can visualize it.