# 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://rotating-3d-cube.vercel.app)
   - **Code**: [Source Code](/01_basic)

### 2. Texture Playground
- **Description**: Interactive PBR material inspector with adjustable textures (grass, boulder, spaceship) and real-time parameter controls.
- **Live Demo**: [View Demo](https://texture-playground.vercel.app)
- **Code**: [Source Code](/08_texturePractice)

### 3. **3D Solar System**
   - **Description**: Simulating planetary orbits with realistic textures and animations.
   - **Live Demo**: [View Demo](https://solar-system-theta-seven.vercel.app)
   - **Code**: [Source Code](/09_solarSystem)
---

## 🚀 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. 🚀