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
How to make a cylinder in React using reactthree-fiber
In this article, we will see how to create a basic cylinder-like shape in React using react-three-fiber. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
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.
Add the following lines of code in App.js −
import React, { useEffect, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
function Cylinder() {
const myref = useRef();
useFrame(() => (myref.current.rotation.x = myref.current.rotation.y += 0.01));
return (
<mesh ref={myref}>
<cylinderBufferGeometry attach="geometry" args={[2, 2, 2]} />
<meshBasicMaterial attach="material" color="hotpink" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Cylinder />
</Canvas>
);
}Explanation
Here we simply created cylinder geometry and mesh for coloring. Always use a separate function to make a shape and then render it inside canvas. The Cylinder function takes 3 arguments: top radius, bottom radius, and height.
<mesh> is used to create the threeJS object, and inside it, we made a box using CylinderGeometry which is used to define the size, shape, and other structural properties. We used meshStandardMaterial to design our geometrical structure.
<mesh> is used to combine the structure and the design together. We created a functional component inside which we made a reference. Then we made a Frame which is required to change the position of our mesh object or cylinder. Then we added the frame to reference and gave reference to mesh.
We used the position argument to position the object. <AmbientLight> is used to make the color visible; in its absence, the <Cylinder> will look completely black.
Output
On execution, it will produce the following output −
1K+ Views
