https://github.com/being-devahmad/three-js-world

https://github.com/being-devahmad/three-js-world

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/being-devahmad/three-js-world
• Owner: being-devahmad
• Created: 2024-11-22T17:47:15.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-22T17:57:45.000Z (over 1 year ago)
• Last Synced: 2025-02-07T01:31:53.974Z (over 1 year ago)
• Language: CSS
• Size: 12.7 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🌟 Introduction to ThreeJS World 🌟

![Three.js Version](https://img.shields.io/badge/Three.js-r150-brightgreen)

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat&logo=vite&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=flat&logo=javascript&logoColor=%23F7DF1E)

![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)

Dive into the fascinating world of 3D web graphics with this comprehensive introduction to Three.js and WebGL! 🚀

![Project Demo](https://img-blog.csdnimg.cn/08c9e94c274f4c6fb488f873b57a3aaf.gif)

## 🎨 Project Overview

Embark on a journey through the following exciting concepts:

- 🧊 Basic 3D objects (cube, sphere, cylinder)

- 🔄 Transformations (scale, rotation)

- 🎬 Animations that bring your scene to life

- 📱 Responsive design for all devices

- 🎥 Orbit controls for immersive exploration

- 🖼️ Textures and materials for realistic rendering

- 💡 Dynamic lighting to set the mood

- 🏗️ Importing and showcasing 3D models

- 🎛️ Interactive GUI with lil-gui

## 🚀 Quick Start

### 🌐 Simple HTML/CSS/JS Version

1. Navigate to the \`/simple\` directory

2. Open \`index.html\` in your favorite browser

3. Voila! You're in a 3D world! 🌍

### ⚡ Vite + Vanilla JS Version

1. Head to the \`/vite-version\` directory

2. Install the magic:

   \`\`\`bash

   npm install

   \`\`\`

3. Start your 3D adventure:

   \`\`\`bash

   npm run dev

   \`\`\`

4. Open the provided URL and explore! 🔍

## 🌈 Features

| Feature | Description |

|---------|-------------|

| 🧊 3D Objects | Create cubes, spheres, and cylinders with ease |

| 🔄 Transformations | Scale and rotate objects like a pro |

| 🎬 Animations | Bring your scene to life with smooth animations |

| 📱 Responsiveness | Perfect viewing on any device |

| 🎥 Orbit Controls | Explore your 3D world from any angle |

| 🖼️ Textures & Materials | Add realistic surfaces to your objects |

| 💡 Lighting | Set the mood with various lighting techniques |

| 🏗️ 3D Models | Import and showcase complex 3D models |

| 🎛️ Debug UI | Fine-tune your scene with an interactive GUI |

## 🧠 Learning Outcomes

By the end of this project, you'll be a master of:

- 🕹️ WebGL basics and its role in 3D graphics

- 🎨 Three.js library and its core concepts

- 🏗️ Creating and manipulating 3D objects

- 🎭 Implementing interactivity and animations

- 🖌️ Working with textures, materials, and lighting

- 🛠️ Setting up a modern dev environment with Vite

## 📚 Resources

- [Three.js Docs](https://threejs.org/docs/) 📖

- [WebGL Docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 🌐

- [Vite Docs](https://vitejs.dev/guide/) ⚡

## 🤝 Contributing

Got ideas? Found a bug? We'd love your input! Feel free to:

- 🍴 Fork the project

- 🐛 Submit issues

- 🛠️ Send pull requests

Let's make this 3D world even more amazing together!

## 📜 License

This project is open source and available under the [MIT License](LICENSE).

---



  Made with ❤️ and a lot of ☕ by [Your Name]