3d-Solar-System-ThreeJS - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #go #android #docker #macos #awesome #kubernetes #security #openai #open-source

3d-Solar-System-ThreeJS

(★ 103)

An 3d Solar System Made Using Three JS and VibeCoding

File Explorer

Download Latest Version (.zip)

- - 8k_earth.jpg
  - 8k_stars.jpg
  - 8k_sun.jpg
  - earth.jpg
  - interstellar.mp3
  - jupiter.jpg
  - lensflare0.png
  - lensflare2.png
  - mars.jpg
  - mercury.jpg
  - neptune.jpg
  - saturn.jpg
  - saturn_ring.png
  - stars.jpg
  - sun.jpg
  - uranus.jpg
  - venus.jpg
- index.html
- - 8k_earth.jpg
  - 8k_stars.jpg
  - 8k_sun.jpg
  - earth.jpg
  - interstellar.mp3
  - jupiter.jpg
  - lensflare0.png
  - lensflare2.png
  - mars.jpg
  - mercury.jpg
  - neptune.jpg
  - saturn.jpg
  - saturn_ring.png
  - stars.jpg
  - sun.jpg
  - uranus.jpg
  - venus.jpg
.gitignore
favicon.ico
index.html
LICENSE
main.js
package-lock.json
package.json
README.md
SECURITY.md
vite.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <h1 align="center">✨3D Solar System Using 
& Vite - VibeCode🌌</h1>
  <p align="center">
    <b>A visually interactive 3D Solar System simulation built with <a href="https://threejs.org/">Three.js</a> and <a href="https://vitejs.dev/">Vite</a>.</b><br>
    <i>Explore the planets, their orbits, and the beauty of our solar neighborhood — all in your browser!</i>
  </p>
  <p align="center">
    <img src="https://img.shields.io/github/repo-size/SoumyaEXE/3d-Solar-System-ThreeJS?color=purple&style=for-the-badge" alt="Repo Size"/>
    <img src="https://img.shields.io/github/last-commit/SoumyaEXE/3d-Solar-System-ThreeJS?color=green&style=for-the-badge" alt="Last Commit"/>
    <img src="https://img.shields.io/github/stars/SoumyaEXE/3d-Solar-System-ThreeJS?style=for-the-badge&color=yellow" alt="Stars"/>
    <img src="https://img.shields.io/github/forks/SoumyaEXE/3d-Solar-System-ThreeJS?style=for-the-badge&color=orange" alt="Forks"/>
  </p>
</p>

---

## ✨ Features

- 🌞 **Realistic 3D models** of the Sun and planets  
- 🪐 **Animated orbits & rotations**  
- 🌍 **Scaled distances & sizes** (for clarity)  
- 🖱️ **Mouse controls** — zoom, pan, and rotate  
- ⚡ Built with **Vite** for fast loading  
- 📱 **Responsive design** (desktop & mobile)

---

## 📸 Screenshots

<p align="center">
  <a href="https://postimg.cc/PLcg3QKh">
    <img src="https://i.postimg.cc/fLTMbH93/localhost-5173-High-Res.png" alt="Screenshot" width="600"/>
  </a>
</p>

---

## 🚀 Getting Started

### ✅ Prerequisites

- [Node.js](https://nodejs.org/) (v16+ recommended)  
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)

### ⚙️ Installation

```bash
git clone https://github.com/SoumyaEXE/3d-Solar-System-ThreeJS.git
cd 3d-Solar-System-ThreeJS
npm install
```

### ▶️ Running Locally

```bash
npm run dev
```
### 🔗 Then Open

```bash
http://localhost:5173
```

### � Environment Variables

Create a `.env` file in the project root to enable the Gemini-powered chatbot (currently tuned for the `gemini-2.0-flash-latest` model):

```bash
VITE_GEMINI_API_KEY=your_google_ai_studio_key
```

The development server will pick up changes automatically; restart it after editing the `.env` file when building for production.

### �📦 Build for Production

```bash
npm run build
```

---

## 📂 Project Structure

```
.
├── public/
│   └── textures/      # Planet textures
├── src/
│   ├── main.js        # Main entry point
│   └── ...            # Other source files
├── index.html
├── package.json
├── vite.config.js
└── README.md
```

---

## 🛠️ Tech Stack

<p align="center">
  <img src="https://skillicons.dev/icons?i=threejs,vite,js,html,css" alt="Tech Stack" />
</p>

---

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!  
Feel free to open an issue or submit a PR to improve the project.

---

## 📜 License

This project is licensed under the MIT License — see [LICENSE](LICENSE) for details.

---

## 🌍 Credits

- 🌌 Planet textures: NASA  
- 🛰️ 3D inspiration: Three.js Examples

---

## 👥 Contributors

<p align="center">
  <a href="https://github.com/SoumyaEXE/3d-Solar-System-ThreeJS/graphs/contributors">
    <img src="https://contrib.rocks/image?repo=SoumyaEXE/3d-Solar-System-ThreeJS" alt="Contributors" style="border-radius: 50%;"/>
  </a>
  <br/>
  <b><sub>Thanks to all who have contributed!</sub></b>
</p>