Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
1K+ Views
