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
• Code: Source Code

2. Texture Playground

• Description: Interactive PBR material inspector with adjustable textures (grass, boulder, spaceship) and real-time parameter controls.
• Live Demo: View Demo
• Code: Source Code

3. 3D Solar System

• Description: Simulating planetary orbits with realistic textures and animations.
• Live Demo: View Demo
• Code: Source Code

---

🚀 Getting Started

To run any of the projects locally:

1. Clone this repository:

   git clone https://github.com/abdulrahmans0414/threejs-mastring.git

2. Navigate to the project folder:

   cd threejs-mastring/01_basic

3. Install dependencies:

   npm install

4. Start the development server:

   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: The official documentation is a must-read for understanding core concepts, APIs, and examples.
• Three.js Examples: A collection of official examples showcasing advanced techniques and features.

Courses and Tutorials

• Three.js Journey: A comprehensive paid course by Bruno Simon, covering everything from basics to advanced topics like shaders and WebXR.
• GLSL Shaders Tutorial: A beginner-friendly guide to writing GLSL shaders, essential for custom materials and effects in Three.js.

Community and Inspiration

• Three.js Forum: A great place to ask questions, share projects, and learn from the community.
• Three.js GitHub Repository: Explore the source code, report issues, or contribute to the library.

Additional Learning

• MDN WebGL Guide: Learn the basics of WebGL, the foundation of Three.js.
• YouTube Channels: 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. 🚀