https://github.com/nir-bhay/3d-solar-system-simulation-
🌎 Interactive 3D Solar System simulation in pure JavaScript using Three.js. Realistic planets, orbital controls, and mobile-responsive UI.
https://github.com/nir-bhay/3d-solar-system-simulation-
front-end interactive simulation solar-system-3d threejs ui
Last synced: 6 months ago
JSON representation
🌎 Interactive 3D Solar System simulation in pure JavaScript using Three.js. Realistic planets, orbital controls, and mobile-responsive UI.
- Host: GitHub
- URL: https://github.com/nir-bhay/3d-solar-system-simulation-
- Owner: Nir-Bhay
- Created: 2025-06-09T10:32:07.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-09T10:34:25.000Z (8 months ago)
- Last Synced: 2025-07-02T06:02:16.413Z (7 months ago)
- Topics: front-end, interactive, simulation, solar-system-3d, threejs, ui
- Language: JavaScript
- Homepage: https://nir-bhay.github.io/3D-solar-system-simulation-/
- Size: 11.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Solar System Simulation
A beautiful, interactive **3D Solar System** simulation built with [Three.js](https://threejs.org/) and plain JavaScript.
Easily visualize the planets, control their orbital speeds, and enjoy a responsive design across desktop and mobile.
## ✨ Features
- **Realistic planets** with NASA textures, Saturn's real rings, and glowing effects.
- **Interactive controls** to adjust the speed of each planet’s orbit.
- **Camera zoom:** Click a planet to zoom in and follow its orbit in real time.
- **Responsive UI:** Works great on both desktop and mobile.
- **Light/Dark mode** toggle.
- **Smooth animations** and subtle atmospheric effects.
## 🚀 Getting Started
1. **Clone this repository:**
```bash
git clone https://github.com/your-username/solar-system-3d.git
cd solar-system-3d
```
2. **Open `index.html`** in your web browser (no build step needed).
## 📁 Project Structure
```
solar-system-3d/
├── index.html
├── script.js
└── (optional) responsive.css
```
- `index.html`: Main HTML file with panel UI and Three.js canvas.
- `script.js`: All 3D logic, planet data, camera controls, and UI hooks.
- `responsive.css`: (Optional) Extra CSS tweaks for mobile.
## 🪐 Controls & Usage
- **Adjust Orbit Speed:** Use sliders in the panel for each planet.
- **Pause/Resume Animation:** Use the Pause button.
- **Zoom to Planet:** Click any planet to focus and follow it.
- **Back to Solar System:** Use the "Back" button to reset camera.
- **Light/Dark Mode:** Switch theme for better visibility.
- **Hover Planet:** See planet names as tooltips (desktop only).
## 📱 Mobile Friendly
- The controls panel can be collapsed for more viewing space.
- All interactive features work on touch devices.
## 🔗 Tech Stack
- [Three.js](https://threejs.org/) for 3D rendering (CDN loaded)
- Pure JavaScript & CSS (no frameworks, no build tools needed)
## 🌏 Credits
- **Planet textures:** NASA, Wikimedia Commons (see inline image URLs).
- **Development:** [Your Name](https://github.com/your-username)
## 📜 License
This project is open source under the [MIT License](LICENSE).
---
Enjoy exploring the Solar System! 🚀