The Sun leads; the planets spiral in its wake.
🔗 Live demo: https://originzero.github.io/solar-vortex/
English · 简体中文
An interactive 3D solar-system visualization, with interaction and atmosphere inspired by Elemental Serenity.
Unlike the classic "Sun in the middle, planets drawing concentric circles" model, the Sun here travels through the galaxy at about 220 km/s, dragging the planets along in its gravitational wake — so every orbit becomes a helix around the Sun's direction of travel, not a closed circle.
Every surface — the Sun's convection layer, gas-giant bands, Earth-like continents, Saturn's rings, the nebula backdrop — is generated in real time by GLSL shaders. No external textures or model files.
| Default view | Side view (helix profile) |
|---|---|
 |
 |
👉 Try it right in your browser — no install needed: https://originzero.github.io/solar-vortex/
- Vortex kinematics — the Sun advances along
-Z; a planet's motion = solar translation + orbital circle + trailing offset. - Helical trail ribbons — each planet drags a camera-facing glowing ribbon that reveals its spiral path.
- Procedural shaders — solar granulation, gas-giant banding with turbulence, Earth-like oceans/continents/ice caps/clouds.
- Saturn's rings & moons — procedural ring system with a Cassini division; Earth carries the Moon.
- Solar wind & near-field dust — particles stream past to make the forward motion tangible.
- Asteroid belt — 1,600 instanced asteroids.
- Bloom glow — UnrealBloomPass post-processing for realistic emission.
- Camera follow & focus — the rig tracks the Sun or any body, with smooth look-at transitions.
- Info cards — diameter, orbital radius, orbital/rotational period, moon count, temperature, and more.
git clone <your-repo-url>
cd solar-vortex
npm install
npm run devThen open http://localhost:5173/.
| Command | Description |
|---|---|
npm run dev |
Start the dev server |
npm run build |
Build for production into dist/ |
npm run preview |
Preview the production build locally |
npm run host |
Expose the dev server on your LAN |
| Action | Description |
|---|---|
| Left-drag | Rotate the view |
| Scroll / pinch | Zoom in / out |
| Click a body | Focus it and show the info card |
| Bottom dock | Quick switch between the Sun and the eight planets |
0 – 8 |
Hotkeys to switch bodies (0=Sun, 1=Mercury … 8=Neptune) |
R |
Reset view |
L |
Toggle name labels |
Space |
Pause / resume |
| Parameter | Description |
|---|---|
| Time scale | Overall simulation speed; 0 freezes the animation |
| Sun speed | The Sun's forward speed — set it to 0 to fall back to the classic horizontal concentric-orbit model |
| Trail length | How many orbital revolutions each helical trail spans |
| Trails / Labels / Belt / Solar wind / Glow / Camera follow | Individual toggles |
| Reset / Wide / Side / Front | Camera presets |
Let the Sun's forward direction be -Z and its position be S(t). A planet's position is:
P(t) = S(t) + R(t) + D
| Term | Meaning |
|---|---|
S(t) |
Solar translation along the forward direction, plus gentle lateral drift |
R(t) |
Circular motion in a plane perpendicular to the forward direction, with inclination and eccentricity |
D |
Trailing offset along +Z, where D = orbitRadius × trailFactor |
D makes outer planets lag farther behind, so the whole family of helices opens into a cone-shaped vortex.
On period compression: orbital periods are compressed so each planet advances roughly one circumference per revolution, keeping a helix turn readable. The real ordering (Mercury fastest, Neptune slowest) is preserved.
solar-vortex/
├── index.html # Entry page + UI skeleton
├── vite.config.js # Vite config
├── package.json # Dependencies and scripts
├── src/
│ ├── main.js # Boot sequence and loading progress
│ ├── styles.css # Global styles and glassmorphism UI
│ ├── Game.js # Main loop: renderer, camera, UI, scene assembly
│ ├── config/
│ │ └── bodies.js # Sun and eight planets data
│ ├── core/
│ │ ├── Renderer.js # WebGLRenderer + EffectComposer + Bloom
│ │ ├── CameraRig.js # Camera, OrbitControls, follow and focus animation
│ │ ├── Sizes.js # Size and DPR tracking
│ │ └── Time.js # Frame timing and FPS
│ ├── world/
│ │ ├── Vortex.js # Vortex kinematics
│ │ ├── Sun.js # Sun + corona + solar wind
│ │ ├── Planet.js # Planets, moons, atmospheres, Saturn's rings
│ │ ├── Trail.js # Helical trail ribbons
│ │ ├── AsteroidBelt.js # Asteroid belt (InstancedMesh)
│ │ ├── Starfield.js # Stars, nebula, near-field dust
│ │ └── SolarSystem.js # Solar system assembly
│ ├── shaders/
│ │ ├── common.js # Simplex noise and shared vertex shader
│ │ ├── bodies.js # Sun / corona / planets / atmosphere / rings
│ │ └── space.js # Stars / nebula / dust / solar wind / trails
│ └── ui/
│ ├── HUD.js # Controls, info card, dock, keyboard events
│ ├── Reveal.js # Iris reveal transition after loading
│ └── DebugGUI.js # ?mode=debug panel
└── docs/
└── preview-*.png # Preview images
| Layer | Technology |
|---|---|
| Build | Vite 6 |
| 3D engine | Three.js 0.182 |
| Animation | GSAP 3 |
| Debug UI | lil-gui |
| Shaders | GLSL (inlined as JS template strings so the noise library is reusable) |
Append ?mode=debug to the URL:
http://localhost:5173/?mode=debug
Tune Bloom strength/radius/threshold, vortex forward speed, trailing factor, lateral drift, trail revolutions, exposure, and camera distance at runtime.
- Recommended: latest Chrome, Edge, or Firefox
- Requires WebGL 2 and ES Modules