Celestial Vehicle Propulsion Simulator
This simulator uses real astronomical data and physics calculations to demonstrate the challenges of space travel. Distances and travel times are based on actual orbital mechanics and propulsion capabilities, and give the true scale of how far the celestial bodies are in our own solar system.
Building an Interactive Solar System in the Browser: A Deep Dive
Space has always captured the imagination—but actually visualizing the scale, motion, and physics of our solar system is another challenge entirely. This project is a fully interactive 3D solar system simulator that runs entirely in the browser, letting you explore planets, moons, and even travel between them using real and fictional propulsion systems.
What It Does
The app renders all eight planets, four dwarf planets (Pluto, Eris, Haumea, Makemake), over twenty moons, and an asteroid belt with 10,000 procedurally generated particles—all orbiting the Sun in real-time according to Kepler's laws of planetary motion. Every celestial body is positioned using actual NASA JPL J2000.0 orbital elements, meaning the planets are where they'd really be on any given date.
Select any planet from the solar system
But it's more than a static model. You can select any planet or moon, read about its physical characteristics and atmospheric composition, and then launch a spaceship from one body to another. The app calculates intercept courses that account for where the destination will be when you arrive—not where it is when you leave. During travel, a real-time dashboard tracks your speed, distance remaining, flight phase (accelerating, cruising, decelerating), and estimated arrival time.
Follow the ship as it travels to the selected planet
Eight propulsion systems range from today's chemical rockets (maxing out at 17 km/s) to theoretical technologies like antimatter drives and warp engines. Each system has its own acceleration profile, max speed, and travel physics. A "flip and burn" toggle lets you choose whether your ship decelerates on arrival—a nod to realistic spaceflight mechanics popularized by The Expanse.
Select from various propulsion methods from real-world rockets to hypothetical tech
How It Was Built
The foundation is Next.js with the App Router, providing the project structure and build pipeline. The 3D scene is powered by Three.js through React Three Fiber (R3F), which lets you write Three.js scenes as declarative React components. Supporting libraries include Drei for camera controls and utilities, and React Three Postprocessing for bloom effects that give the Sun its glow.
State management uses Zustand, a lightweight store that tracks everything from which planet is selected to the current simulation time, camera mode, journey status, and UI panel visibility. This single store coordinates complex interactions—starting a journey updates the propulsion system, calculates intercept distances, triggers camera transitions, and begins the travel animation all from one action.
The orbital mechanics engine is the project's backbone. Written in TypeScript, it solves Kepler's equation iteratively using Newton's method to compute each body's position on its elliptical orbit at any point in time. Moon positions are calculated relative to their parent planets, then converted to heliocentric coordinates. The intercept course algorithm iteratively converges on the correct travel distance by accounting for the destination planet's movement during the journey.
Styling combines SCSS Modules for component-scoped styles with CSS custom properties for a consistent dark glassmorphism theme—semi-transparent panels with backdrop blur that let the 3D scene show through. The interface is fully responsive, with mobile-specific layouts including bottom-sheet modals, collapsible panels, and an immersive mode that hides all UI for unobstructed viewing.
Planet textures are preloaded asynchronously at app startup to prevent visual pop-in. Performance optimizations include sprite rendering for distant moons, a point-cloud asteroid belt instead of individual meshes, and the React Compiler for automatic component memoization.
The Technology Stack
- Next.js 16 — Framework and build system
- React 19 — UI rendering with the React Compiler
- Three.js / React Three Fiber — 3D graphics and scene management
- Drei — Camera controls, HTML overlays, postprocessing helpers
- Zustand — Global state management
- TypeScript — Type safety across the entire codebase
- SCSS Modules — Scoped component styling
- Tailwind CSS 4 — Utility classes for layout
- Postprocessing — Bloom effects for the Sun and atmosphere glow
How to Explore the App: A Step-by-Step Guide
1. Welcome Screen When you first load the app, a welcome overlay introduces the simulator. You'll see a "Start Journey" button—tap or click it to enter the solar system.
2. Browse the Solar System You're now looking at a 3D view of the solar system with planets orbiting the Sun. Use your mouse to orbit the camera (click and drag), zoom (scroll wheel), and pan (right-click drag). On mobile, use one finger to orbit and pinch to zoom.
3. Select a Planet Open the navigation panel on the left (on mobile, tap the hamburger menu icon in the top-left corner). You'll see celestial bodies grouped by type: Terrestrial Planets, Satellites, Gas & Ice Giants, and Dwarf Planets. Use the search bar to filter, or scroll through the list. Click any body to fly the camera to it.
4. Read Planet Details When a planet is selected, an info panel appears on the right showing its diameter, mass, gravity, orbital period, atmospheric composition, and other facts.
5. Start a Journey Click the "Travel Here" button in the info panel to begin planning a trip. This opens the Propulsion Selector.
6. Choose Your Propulsion A modal presents eight propulsion systems—from chemical rockets to warp drive—each showing the estimated travel time for your route. You can change your departure point using the origin dropdown, and toggle "Flip and Burn" to decide whether your ship decelerates on arrival. Select a propulsion system and tap "Begin Journey."
7. Watch the Journey Your spaceship launches and the camera follows it through space. A travel dashboard shows your current speed, distance remaining, flight phase, progress percentage, and estimated time of arrival. Use the time controls (bottom-right) to speed up the simulation—1x, 10x, 100x, or 1000x real time.
8. Arrive at Your Destination When you reach the destination, a celebration screen shows your route summary, total distance, and travel time. Click "Continue Exploring" to keep navigating the solar system.
9. Adjust the View The controls panel lets you toggle between Visual and Realistic scale modes, show or hide orbit lines, planet labels, and engine trails, and monitor your frame rate. On mobile, an eye icon in the bottom-right corner toggles all UI panels on and off for an immersive full-screen view of space.