Ata HalıcıoğluBackend Engineer
Back to projects

Solo Developer

Around the World

Interactive 3D solar system explorer with real Keplerian orbital mechanics, time simulation, and procedural planet surfaces — built entirely in the browser.

2026

ReactTypeScriptThree.jsReact Three FiberVite
View Live ↗
23 celestial bodies with JPL Keplerian orbital elements
real-time orbit simulation from J2000 epoch
deployed on Cloudflare Pages

Context

Around the World is a browser-based 3D solar system explorer. The goal was to build something that feels accurate — real orbital paths, real inclinations, real eccentricities — while still being visually readable and interactive. Everything runs client-side with no backend.

Architecture

The app is a single-page Vite + React build. All 3D rendering runs through React Three Fiber (a React renderer for Three.js). State lives entirely in the root component and flows down as props — no external state library.

  • - 23 celestial bodies: the Sun, all 8 planets, and 14 major moons
  • - Orbital data sourced from JPL Solar System Dynamics (J2000 epoch elements)
  • - Procedural canvas-generated surface textures per body class
  • - Two display modes: Readable (scaled for visibility) and Scale (physically proportional)

Key Engineering Challenges

  • - Keplerian orbital mechanics: Each body's position is computed from its six orbital elements (eccentricity, inclination, longitude of ascending node, longitude of periapsis, mean longitude) using a Newton-Raphson solver for the eccentric anomaly. Moon positions inherit their parent planet's axial tilt so moon systems don't all sit flat in the ecliptic plane.
  • - Camera system: Two modes — guided (smooth lerp follow-focus with a timed ease-in-out transition between bodies) and free-roam (WASD + mouse look with Shift boost). Clicking a body triggers a ~1.1 second eased transition from the current camera position to a default view distance, then hands back full scroll zoom control.
  • - Time simulation: A useFrame-driven clock advances a simulated timestamp at configurable speed (0–720 hours per second). All body positions recompute from the timestamp each frame, making the simulation scrub-able in both directions.
  • - Procedural surfaces: Surface textures are generated at runtime on a canvas element per visual class — gas bands, crater fields, ocean continents, cloud layers, ice stripes — avoiding any external texture asset downloads.

Implementation Highlights

  • - Saturn and Uranus ring systems built as ringGeometry meshes with per-planet tilt and opacity.
  • - Jupiter's Great Red Spot rendered as a sub-sphere offset from the planet surface.
  • - Atmospheric halo shells on ocean, cloud, and ice bodies using additive blending.
  • - Mobile layout redesigned with a horizontal scrollable planet strip at the top, bottom control bar with safe-area insets, and 44px touch targets.
  • - Deployed as a static site to Cloudflare Pages via a single npm run deploy:cloudflare command.