Table of Contents
👉Three Js
➡️ What is a Three Js?
● Three.js is an open source JavaScript library that is used to display the graphics, 3D and 2D objects on the web browser.
● Three.js was released by Ricardo Cabello (Mr. doob) in April 2010.
● It uses WebGL API behind the scene.
● Three Js mostly works with WebGL.
● Learn more about three js.
➖ Installation Process
npm i three
Camera :
Types of Camera :
- Perspective Camera
- Stereo Camera.
- Orthographic Camera
- Cube Camera

Light :
Types of Light :
- Ambient light
- Directional light
- Point light
- Spot light

👉React Three Fiber
➡️ What is React Three Fiber?
● React-three-fiber is a React renderer for three.js
● react-three-fiber is a powerful Three. Js renderer that helps render 3D models and animations for React and its native applications.
➖ Installation Process
npm install three @react-three/fiber
Example of Basic Application :

Output :

Three Js Journey With React
🔸 React – Three js Setup🔸
create-react-app three-js
// Create React App
👉 Add dependency
➖ npm i three
➖ npm i @react-three/fiber
➖ npm i @react-three/drei
➖ npm i gsap
➖ npm i @react-three/cannon // physics: 3D library
🔸Add dependency All in one🔸
npm i three @react-three/fiber @react-three/drei @react-three/cannon gsap
Do’s & Don’ts for performance and best practices
Documentation
- React Three Fiber
- React Three Canon / Canon-es
- React Three Canon Examples

Three js Resources:
I hope you like this Three Js Journey With React article.
Also Read :
- Tailwind CSS Setup
- Chakra UI Setup
- JavaScript Date Methods
- Angular Material Grid Layout Example
- Top 10 VS Code extensions