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
Creating a 3D donut-like structure in React using react-three-fiber
In this article, we are going to see how to make a 3D figure which will look like a donut. We will apply this in a webpage using react-three-fiber. We will use this package to make a donut-like shape which will keep moving and we will see it from inside of it.
Example
First, download important libraries −
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.
Add the following lines of code in App.js −
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Tourus() {
const ref = useRef(null);
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));
return (
<mesh visible position={[0, 0, 0]} castShadow ref={ref}>
<torusGeometry args={[10, 3, 16, 100]} />
<meshStandardMaterial attach="material" color="lightblue" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Tourus />
</Canvas>
);
}The function Tourus takes 4 arguments: inner radius, tube radius, radial segment which decides the roundness of internal part, and tubular segment which decides the roundness of outer part.
Output
It is the 3D view of camera where the camera is between the inner radius of donut.
It is rotating and it is a snip while it is rotating.
435 Views
