https://github.com/sunjay-dev/solar-system-3d

A web-based 3D solar system viewer built with React and Three.js. Users can explore planets in real-time, view detailed facts, and enjoy a 3d experience.
https://github.com/sunjay-dev/solar-system-3d

include material-ui react tailwindcss threejs

Last synced: 5 months ago
JSON representation

A web-based 3D solar system viewer built with React and Three.js. Users can explore planets in real-time, view detailed facts, and enjoy a 3d experience.

Host: GitHub
URL: https://github.com/sunjay-dev/solar-system-3d
Owner: sunjay-dev
Created: 2025-06-20T22:43:18.000Z (8 months ago)
Default Branch: main
Last Pushed: 2025-06-27T13:53:38.000Z (8 months ago)
Last Synced: 2025-06-27T14:43:16.097Z (8 months ago)
Topics: include, material-ui, react, tailwindcss, threejs
Language: JavaScript
Homepage: https://solarverse.sunjay.xyz
Size: 36.6 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🌌 SolarVerse

SolarVerse Preview

**SolarVerse** is an interactive 3D space exploration web app built using **React**, **Three.js**, and **React Three Fiber**. It allows users to explore the solar system in a visually engaging way, learn about different planets, and experience real-time planet rendering with bump, normal, and ring textures.

---

### 🚀 Features

- 🌍 View all planets of the Solar System in 3D
- 🪐 Realistic planet textures, rings, and lighting
- 🧭 Responsive camera and orbit controls
- 📱 Mobile optimized (auto camera adjustment)
- 🔍 Planet facts with interactive toggle panel
- 🧠 SEO ready with `react-helmet-async`
- ⚡ Performance-optimized loading experience
- 🌙 Dark mode support

---

### 🛠️ Tech Stack

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Three js](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white)
---

### 🌍 Live Demo

🔗 [solarverse.sunjay.xyz](https://solarverse.sunjay.xyz)

---

### 📁 Project Structure

```bash
├── src/
│ ├── Components/
│ │ ├── home/
│ │ ├── viewer/
│ ├── Data/
│ ├── Hooks/
│ ├── Pages/
│ ├── App.jsx
│ └── main.jsx
````

---

### 🧩 Upcoming Features

* 🎮 **A Space Game** using **Three.js** – a thrilling asteroid-dodging experience (coming soon!)
* 🛰️ Moon and satellite support
* 🧪 Educational mini-quizzes on planets
* 🌌 Galaxy/nebula background customization

---

### 🚧 Development

To run the project locally:

```bash
git clone https://github.com/sunjay-dev/solar-system-3d
cd solar-system-3d
npm install
npm run dev
```

---

### 📸 Screenshots

Landing Page
Planet Slider
Earth

Saturn
Viewer