https://github.com/abdulrahmans0414/threejs-mastery
Mastering Three.js step by step! This repository documents my learning journey, starting from the basics of 3D web development. Exploring core concepts like scenes, cameras, renderers, geometries, and materials, with hands-on projects and experiments. Gradually progressing to advanced topics like shaders, animations, physics, and WebXR.
https://github.com/abdulrahmans0414/threejs-mastery
camera fov orbit renderer renderloop scene threejs threejs-example vite
Last synced: about 1 year ago
JSON representation
Mastering Three.js step by step! This repository documents my learning journey, starting from the basics of 3D web development. Exploring core concepts like scenes, cameras, renderers, geometries, and materials, with hands-on projects and experiments. Gradually progressing to advanced topics like shaders, animations, physics, and WebXR.
- Host: GitHub
- URL: https://github.com/abdulrahmans0414/threejs-mastery
- Owner: abdulrahmans0414
- Created: 2025-03-16T19:26:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-16T19:50:19.000Z (about 1 year ago)
- Last Synced: 2025-03-16T20:36:10.030Z (about 1 year ago)
- Topics: camera, fov, orbit, renderer, renderloop, scene, threejs, threejs-example, vite
- Language: JavaScript
- Homepage: https://threejs-mastery.vercel.app
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Three.js Mastring 🚀
Welcome to my journey of mastering **Three.js**! This repository documents my progress from the **fundamentals to advanced 3D web development techniques**. Each step includes hands-on projects, experiments, and code examples. Whether you're here to learn, collaborate, or provide feedback, feel free to explore and contribute!
---
## 📚 Topics Covered
### **1. Fundamentals**
- **Scenes, Cameras, and Renderers**: Setting up the core components of a 3D world.
- **Geometries and Materials**: Creating and styling 3D objects.
- **Transformations and Animations**: Moving, scaling, and rotating objects.
### **2. Intermediate**
- **Textures and UV Mapping**: Adding realism with images and patterns.
- **Lighting and Shadows**: Enhancing scenes with lights and shadows.
- **Orbit Controls**: Making scenes interactive with camera controls.
### **3. Advanced**
- **Shaders and Custom Materials**: Writing GLSL for custom visual effects.
- **Physics and Simulations**: Adding realism with physics engines.
- **WebXR**: Building immersive VR/AR experiences.
---
## 🛠️ Projects
Here are some of the hands-on projects I've worked on, complete with live demos:
### 1. **Rotating Cube**
- **Description**: A simple introduction to Three.js, showcasing a rotating 3D cube.
- **Live Demo**: [View Demo](https://threejs-mastery.vercel.app/)
- **Code**: [Source Code](/01_basic)
### 2. **3D Solar System**
### 3. **Interactive Scene**
### 4. **Shader Playground**
---
## 🚀 Getting Started
To run any of the projects locally:
1. Clone this repository:
```bash
git clone https://github.com/abdulrahmans0414/threejs-mastring.git
```
2. Navigate to the project folder:
```bash
cd threejs-mastring/01_basic
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
## 🤝 How to Contribute
I welcome contributions, feedback, and collaboration! Here’s how you can help:
- **Report Issues:** Found a bug or have a suggestion? Open an issue.
- **Submit Pull Requests:** Have a fix or improvement? Submit a PR.
- **Share Feedback:** Let me know what you think!
## 📌 Resources
Here are some of the resources that have been invaluable in my Three.js learning journey:
### **Official Three.js Resources**
- **[Three.js Documentation](https://threejs.org/docs/)**: The official documentation is a must-read for understanding core concepts, APIs, and examples.
- **[Three.js Examples](https://threejs.org/examples/)**: A collection of official examples showcasing advanced techniques and features.
### **Courses and Tutorials**
- **[Three.js Journey](https://threejs-journey.com/)**: A comprehensive paid course by Bruno Simon, covering everything from basics to advanced topics like shaders and WebXR.
- **[GLSL Shaders Tutorial](https://thebookofshaders.com/)**: A beginner-friendly guide to writing GLSL shaders, essential for custom materials and effects in Three.js.
### **Community and Inspiration**
- **[Three.js Forum](https://discourse.threejs.org/)**: A great place to ask questions, share projects, and learn from the community.
- **[Three.js GitHub Repository](https://github.com/mrdoob/three.js)**: Explore the source code, report issues, or contribute to the library.
### **Additional Learning**
- **[MDN WebGL Guide](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)**: Learn the basics of WebGL, the foundation of Three.js.
- **[YouTube Channels](https://www.youtube.com/results?search_query=three.js+tutorial)**: Channels like **Bruno Simon** and **SimonDev** offer free tutorials and project walkthroughs.
---
These resources have been instrumental in my learning process, and I highly recommend them to anyone starting or advancing their Three.js journey!
## 🌟 Show Your Support
If you find this repository helpful, give it a ⭐️ star ⭐️ to show your support!
---
Happy coding! Let's build amazing 3D experiences together. 🚀