An interactive 3D solar system built with React, Three.js, and TypeScript. Explore all 8 planets with physically-informed orbital parameters, 10,000 asteroids, moons, and a 20,000-star background — all rendered in real-time WebGL.
- All 8 planets with realistic orbital parameters — eccentricity, AU distances, and orbital periods
- Multiple scale modes — Dramatic, Wide, and Realistic views
- Asteroid belt with 10,000 individually rendered asteroids between Mars and Jupiter
- Oort Cloud rendered at scale
- Moons orbiting their parent planets
- Speed controls — scrub orbital animation speed in real-time
- Orbital path toggles — show or hide radius lines
- Hover & selection — click any body for details
- 20,000-star background field for depth
| Layer | Library |
|---|---|
| 3D Rendering | Three.js + @react-three/fiber |
| Post-processing | @react-three/postprocessing |
| Animation | GSAP + React Spring |
| State | Zustand |
| Styling | Tailwind CSS |
| Build | Vite + TypeScript |
# Install dependencies
bun install
# Start dev server
bun dev
# Build for production
bun run buildRequires Node 18+ or Bun.
src/
├── components/ # Scene, Planet, Moon, Sun, AsteroidBelt, StarField, controls
├── data/ # Planet configs — orbital params, eccentricity, AU distances
├── hooks/ # Custom React hooks
├── store/ # Zustand state
├── types/ # TypeScript definitions
└── context/ # Planet selection context
MIT