Add axis in three.js

The addAxis() method adds a visual representation of the 3D coordinate axes to the scene, along with corresponding labels (“X”, “Y”, “Z”) placed at the ends of each axis. This helps users easily identify the orientation of the 3D space.

Three.js addAxis() Method Description

The addAxis() method is responsible for adding a visual representation of the coordinate axes (X, Y, Z) to a 3D scene using Three.js. Here’s a breakdown of the method:

1. Adding the Axes Helper

The method begins by creating an instance of THREE.AxesHelper with a size of 35 units. This helper is a built-in utility in Three.js that visually represents the three coordinate axes:

• X-axis (usually red)
• Y-axis (usually green)
• Z-axis (usually blue)

The axesHelper is then added to the scene using this.scene.add(axesHelper).

2. Loading the Font

The method loads a font using the FontLoader from Three.js. The font file is located in the specified path and is loaded asynchronously. Once the font is loaded, a callback function is triggered to create text labels for the axes.

3. Creating Text Labels

Within the callback function, a text material is created using THREE.MeshBasicMaterial with a white color (0xffffff). A helper function, createTextMesh, is defined to generate 3D text meshes:

• Text Geometry: The function takes in a text string and a position vector. It creates a 3D text geometry using the loaded font, with a size of 4 units and a depth of 1 unit.
• Text Mesh: A mesh is created from the text geometry and material, then positioned in the scene at the specified coordinates.

4. Adding Axis Labels

The createTextMesh function is used to create and position labels for the X, Y, and Z axes at the following positions:

• X Label: Placed at (36, 0, 0)
• Y Label: Placed at (0, 36, 0)
• Z Label: Placed at (0, 0, 36)

These labels help identify the orientation of each axis in the 3D scene.

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'
import { Font, FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'

addAxis() {
    const axesHelper = new THREE.AxesHelper(35)
    this.scene.add(axesHelper)

    const loader = new FontLoader()
    loader.load('./../../../assets/fonts/Fira Code Retina_Regular.json', (font: Font) => {
      const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff })

      const createTextMesh = (text: string, position: THREE.Vector3) => {
        const textGeo3 = new TextGeometry(text, {
          font: font,
          size: 4,
          depth: 1,
        })
        const textMesh = new THREE.Mesh(textGeo3, textMaterial)
        textMesh.position.copy(position)
        this.scene.add(textMesh)
      }

      createTextMesh('X', new THREE.Vector3(36, 0, 0))
      createTextMesh('Y', new THREE.Vector3(0, 36, 0))
      createTextMesh('Z', new THREE.Vector3(0, 0, 36))
  })
}