Welcome to my collection of Three.js projects built as part of my learning journey. Each project explores a different feature or concept in Three.js, ranging from basic geometries to advanced animations and effects.
Here’s the complete list of projects. Click on any project name to explore it live! 🎉
| # | Project Name | Description | Demo |
|---|---|---|---|
| 1 | 🛠️ Transform Object | Learn how to transform objects. | Demo |
| 2 | 📷 Cameras | Explore camera types and controls. | Demo |
| 3 | ⏯️ Animations | Create smooth animations in Three.js. | Demo |
| 4 | 📐 Geometries | Discover the different geometry types. | Demo |
| 5 | 🐞 Debugging | Tools and techniques to debug projects. | Demo |
| 6 | 🖼️ Textures | Apply and manipulate textures. | Demo |
| 7 | 🎨 Materials | Work with materials and shading. | Demo |
| 8 | 🔤 3D Text | Add and customize 3D text. | Demo |
| 9 | 💡 Lights | Light up the scene with different lights. | Demo |
| 10 | 🌑 Shadows | Implement shadows in your scene. | Demo |
| 11 | 👻 Haunted House | A spooky haunted house project! | Demo |
| 12 | ✨ Particles | Add particle effects to your scene. | Demo |
| 13 | 🌌 Galaxy Project | Procedurally generate a galaxy. | Demo |
| 14 | 🖱️ Scroll Animation | Animate on scroll events. | Demo |
| 15 | ⚖️ Physics | Add basic physics simulations. | Demo |
| 16 | 🔧 Physics Workers | Physics using web workers. | Demo |
| 17 | 📦 External Models | Load external 3D models into your scene. | Demo |
| 18 | 🎯 Raycaster & Events | Interact using raycasting. | Demo |
| 19 | 🌎 Environment Map | Explore environment mapping. | Demo |
| 20 | 🖼️ Realistic Render | Create realistic-looking renders. | Demo |
| 21 | 🚀 Big Projects | Combine techniques into big projects. | Demo |
| 22 | ✨ Shaders | Write custom shaders for effects. | Demo |
| 23 | 🌊 Raging Sea | Simulate a dynamic sea surface. | Demo |
| 24 | 🪐 Animated Galaxy with Shaders | Similar project as 13 but with Shaders. | Demo |
- Clone this repository:
Copy code
git clone https://github.com/your-username/threejs-projects.git
cd threejs-projects- Go into any project folder and run:
Copy code
npm install
npm run dev- Open the project in your browser at http://localhost:5173.
You can explore all projects live at: GitHub Pages Link.
Three.js - 3D JavaScript library. Vite - Fast build tool and dev server. JavaScript - Core programming language. TypeScript - Some projects use typescript instead