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 a wobbling cube in React using react-three-fiber
In this article, we will see how to make a wobbling cube in React, which will be wobbling in a loop and spinning at same time. We will first make a cube and then add the wobbling effect. We can also add a feature to make the cube wobble on hovering. So, let's get started.
Example
First download the react-three-fiber package −
npm i --save @react-three/fiber npm i --save @react-three/drei npm i --save three
threejs and react-three/fiber will be used to add webGL renderer to the website. react-three/fiber will be used to connect threejs and React. drei is used to add wobblingMesh.
Add the following lines of code in App.js −
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { MeshWobbleMaterial } from "@react-three/drei";
function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<MeshWobbleMaterial
attach="material"
factor={1}
speed={10}
color={"lightblue"}/>
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[0, 0, 0]} />
</Canvas>
);
}Explanation
Here we first created a BoxGeometry object. Then in the material object we provided MeshWobbleMaterial which we imported from drei. The code is quite self-explanatory; we did some basic lighting and positioned the object.
<mesh> is used to create the threeJS object, and inside it, we made a box using boxGeometry which is used to define the size, shape and other structural parameters. We used meshWobbleMaterial to design our geometrical structure and to add the wobbling effect.
Output
On execution, it will produce the following output −
420 Views
