A beautiful, interactive Three.js simulation of the solar system with realistic relative orbital periods, adjustable time scale, starfield, and a modern glass HUD.
Live demo: https://rdsciv.github.io/grokerSolarSystem/
Requires Node.js 20+ and Git.
git clone https://github.com/rdsciv/grokerSolarSystem.git
cd grokerSolarSystem
npm install
npm run devOpen the URL Vite prints (default http://localhost:5173).
npm run build # production build
npm run preview # serve dist/- All 8 planets + Sun with Keplerian elliptical orbits
- Earth’s Moon and an asteroid belt
- Adjustable time from paused → centuries per second
- Bloom lighting, procedural planet textures, Saturn’s rings
- Focus navigation — click a body to track it with the camera
- Orbit paths, labels, motion trails toggles
- Shareable URLs — focus, speed, and display flags in the query string
- Modern glassmorphism HUD with FPS and simulated date
Views sync to the URL so you can bookmark or share a configuration:
| Param | Example | Meaning |
|---|---|---|
focus |
saturn |
Body under camera focus |
speed |
365 |
Earth days per real second |
orbits |
0 |
Hide orbit paths |
labels |
0 |
Hide labels |
trails |
1 |
Show motion trails |
asteroids |
0 |
Hide asteroid belt |
Example:
?focus=jupiter&speed=30&trails=1
Use the Share button in the HUD (or press S) to copy the current link.
| Input | Action |
|---|---|
| Drag | Orbit camera |
| Scroll | Zoom |
| Right-drag | Pan |
| Space | Pause / play |
| O | Toggle orbits |
| L | Toggle labels |
| S | Share / copy link |
This is a visualization, not an ephemeris:
- Orbital periods, eccentricity, and axial tilt use standard planetary values so relative motion feels right (Mercury races; Neptune crawls).
- Distances and radii are compressed so the whole system fits on screen. Outer planets use stronger distance compression than the inner system.
- Planet textures are procedural (not NASA maps).
- Starting orbital phases are deterministic per body id for stable reloads.
Approximate orbital elements are drawn from commonly cited NASA / JPL planetary fact sheets (semi-major axis, period, eccentricity, rotation, tilt).
src/
main.js # bootstrap, animation loop, UI wiring
data.js # body catalog & distance scaling
time.js # speed slider helpers
textures.js # procedural textures
starfield.js # stars / milky-way band
solarSystem.js # meshes, orbits, moon, asteroids
urlState.js # shareable query params
style.css # HUD
See CONTRIBUTING.md. Bug reports and features use the issue templates under .github/ISSUE_TEMPLATE/.
- Three.js — WebGL scene, post-processing
- Vite — dev server & build
- GitHub Actions — CI build + Pages deploy
MIT © 2026 Ryan Childress