Making an axes helper in React using react-three-fiber

Axes helpers are used to show direction in three-dimensional figures when you apply any orbit control. Axes use the concept of coordinate geometry to show how to make shapes and make orbits for zooming, rotating, sliding, etc. They are really helpful while developing a 3D environment.

Example

First download the react-three-fiber package −

npm i --save @react-three/fiber three

threejs and react-three/fiber will be used to add webGL renderer to the website. Three-fiber will be used to connect threejs and React.

We will first make a cuboid and an orbit control for better view

Add the following lines of code in App.js −

import React, { useEffect } from "react";
import { Canvas, useThree } from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";

const CameraController = () => {
   const { camera, gl } = useThree();
   useEffect(() => {
      const controls = new OrbitControls(camera, gl.domElement);
      return () => {
         controls.dispose();
      };
   }, [camera, gl]);
   return null;
};
export default function App() {
   return (
      <Canvas>
         <CameraController />
         <ambientLight />
         //here axes helper is applied
         <primitive object={new THREE.AxesHelper(10)} />
         <mesh>
            <boxGeometry attach="geometry" args={[5, 5, 5]} />
            <meshBasicMaterial attach="material" color="lightblue" />
         </mesh>
      </Canvas>
   );
}

Explanation

We simply created an orbit control and a cube.

Axes helpers are applied to show the direction of the 3D object. We simply created a cube geometry and used meshBasicMaterial for its styling.

Output

It will produce the following output −

Green, blue, and red lights are used to show directions