📦 Three.js Class

This repository contains the code from our Three.js + React + Vite class session.

In this class, we learned what Three.js is, how it works with React, and how to create a basic 3D scene using @react-three/fiber (R3F) and @react-three/drei. We also created a simple rotating 3D box.

---

🔧 Technologies Used

• React – UI library
• Vite – Fast build tool
• Three.js – Core 3D graphics library (WebGL)
• @react-three/fiber (R3F) – React renderer for Three.js
• @react-three/drei – Helper components for R3F

---

🧠 What We Covered in Class

In today’s class, we covered the following topics:

• What Three.js is and why it is used for 3D graphics on the web
• Creating a React + Vite project
• Installing Three.js related libraries
• Understanding React Three Fiber (R3F)
• Using Drei helper components
• Creating a basic 3D scene
• Adding a box geometry
• Rotating the box using animation

---

📦 Installation

First, clone the repository:

git clone https://github.com/suryamani752/three.js-class.git

Go inside the project folder:

cd three.js-class

Install dependencies:

npm install

Installed main libraries:

---

▶️ Run the Project

Start the development server:

npm run dev

Open your browser and you should see a rotating 3D box rendered using Three.js.

---

🧩 Project Structure

📦 public
📦 src
  └── React + Three.js code
.eslint.config.js
index.html
package.json
vite.config.js

---

🔄 Rotating Box Explanation

We used React Three Fiber to animate the box:

• <Canvas> is used to create the 3D scene
• <mesh> is used to create the box
• The box rotates smoothly using frame-based animation

📝 Notes

• This project is a beginner-friendly introduction to Three.js with React
• You can extend this by adding lights, camera controls, textures, and 3D models
• Perfect starting point for learning 3D web development

---

🙌 Conclusion

This repository represents what we learned in today’s Three.js class.

Keep practicing and experimenting with 3D scenes 🚀

Happy Coding! 💙 MADE BY SURYAMANI KUMAR