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
Adding OrbitControls in React using reactthree-fiber
In this article, we will see how to add OrbitControls in React using react-three-fiber. It is like making a camera; we can move on screen and view each side of any 3D object. We can use OrbitControl to provide zoom and sliding effects too. So, let's get started.
Example
Install the react-three/fiber library −
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.
First create an orbital control object 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";
import "./App.scss";
const CameraController = () => {
const { camera, gl } = useThree();
useEffect(
() => {
const controls = new OrbitControls(camera, gl.domElement);
controls.minDistance = 3;
controls.maxDistance = 20;
return () => {
controls.dispose();
};
},
[camera, gl]
);
return null;
};CameraController is used to add orbital control on the whole screen.
useThree() gives you a camera object, which is used to move on screen.
gl indicates the area on which you are moving.
In useEffect, we combined both the OrbitControls object.
Then we added the minDistance and maxDistance parameters to restrict the movement on screen.
Next, add the following lines in App.css −
* {
box-sizing: border-box;
}
html,body,#root{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
background: #f1f4f8;
position: fixed;
}This CSS is used to make the canvas match parent size.
Now, let's add OrbitControl in the App component. Add the following lines of code in App.js −
export default function App(){
return (
<Canvas>
<CameraController />
<ambientLight />
<spotLight intensity={0.3} position={[5, 10, 50]} />
<mesh>
<boxGeometry attach="geometry" args={[3, 2, 1]} />
<meshPhongMaterial attach="material" color="hotpink" />
</mesh>
</Canvas>
);
};We created a cuboid and added our previous orbitcontrol object “CameraController” in the App component. OrbitControl is used to add zoomIn, zoomOut, moving, and other effects on our canvas.
Output
On execution, it will produce the following output −
2K+ Views
