Solaris 3D: Interactive Solar System & Galaxy Hub

A hyper-realistic, interactive 3D solar system and sci-fi galaxy hub built with React and Three.js.

Comment

Inspiration

Humanity has always gazed at the night sky with wonder. As modern WebGL and 3D web technologies evolve, we wanted to build a web experience that brings the awe of space exploration straight to the browser — without requiring heavy downloads or external game engines.

Inspired by deep space sci-fi aesthetic, Solaris 3D combines real Keplerian planetary mechanics with a futuristic Sci-Fi Galaxy Hub that lets users explore celestial bodies, moons, satellites, and distant galactic star systems in real time.

What It Does

Solaris 3D is a fully interactive 3D space visualizer with dual view modes:

  • ☀️ Interactive Solar System View:

    • All 8 major planets + Sun rendered with relative orbital distances and real axial tilts.
    • Procedural Canvas Texture Generators: Realistic surface terrain for Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, and Luna.
    • Earth Special Modes: Switch seamlessly between Normal Day/Night Shaders, Live Satellite View, and City Night Lights Mode.
    • Orbiting Satellites & Moons: Interactive 3D models of the ISS (International Space Station) and Hubble Space Telescope orbiting Earth with neon particle trails, as well as natural moons (Io, Europa, Titan, Triton).
    • Main Asteroid Belt & Kuiper Belt: Thousands of instanced asteroids orbiting in 3D space.

  • 🌌 Sci-Fi Galaxy Hub View:

    • 18,000+ Particle Milky Way Galaxy: Spiral galaxy visualization featuring a central supermassive black hole with an accretion disk.
    • Galactic Star System Radar: Navigate between neighboring star systems (Sol, Alpha Centauri, Sirius, Vega Prime, TRAPPIST-1, Andromeda Gateway).

  • 📊 Scientific Data Cards:

    • Detailed physical parameters (diameter, mass, orbital period, surface temp) alongside futuristic sci-fi lore for every planet and satellite.

How We Built It

We engineered Solaris 3D using a modern, lightweight WebGL architecture:

  1. Frontend Core: React 19 + Vite for fast component state management and UI overlays.
  2. 3D Graphics Engine: Three.js (WebGLRenderer) with custom GLSL ShaderMaterials for atmospheric rim scattering, specular ocean reflections, and day/night terminal light blending.
  3. Procedural Texture Pipeline: HTML5 2D Canvas-driven procedural texture algorithms to generate crisp 1024x1024 planetary maps dynamically at runtime without external asset overhead.
  4. Orbital Math & Physics:
    • Planetary orbital mechanics follow parametric elliptical equations: [ x(t) = d \cdot \cos(\omega t + \theta_0), \quad z(t) = d \cdot \sin(\omega t + \theta_0) ]
    • Keplerian orbital speed normalization for 60 FPS performance: [ v_{\text{orbit}} \propto \frac{1}{\sqrt{r}} ]
  5. Camera & Animation Dynamics: TWEEN.js for smooth cubic camera interpolations and OrbitControls for orbit, zoom, and pan gestures.
  6. Deployment: Deployed on Vercel with optimized build assets.

Challenges We Ran Into

  • Performance Optimization: Rendering 18,000 galaxy particles, 3,500 instanced asteroids, 8 detailed planets, atmospheres, and particle trails at a solid 60 FPS. We solved this by implementing InstancedMesh for asteroids and buffer geometries with additive blending for starfields.
  • Shader Day/Night Transition: Writing custom GLSL fragment shaders to calculate the dot product between planet surface normals and the Sun's light vector (\vec{N} \cdot \vec{L}), creating seamless terminator line transitions between daylight terrain and illuminated night city lights.

Accomplishments That We're Proud Of

  • Zero External Texture Assets: Generated rich planetary surface textures dynamically using Canvas 2D procedural generators.
  • Flawless 60 FPS WebGL Performance: Smooth camera transitions and responsive UI overlays across mobile and desktop browsers.
  • Dual Perspective System: Seamless transition from detailed planetary exploration to macroscopic galaxy navigation.

What We Learned

  • Advanced WebGL scene optimization techniques including instanced geometry rendering, buffer attribute streaming, and custom GLSL uniforms.
  • Designing responsive glassmorphism UI overlays that remain legible over dynamic 3D space backgrounds.

What's Next for Solaris 3D

  • 🚀 Interactive Spaceship Flight: Drive a custom starship through asteroid belts in first-person flight mode.
  • 🔭 Real-time NASA/JPL API Integration: Live satellite tracking and NEO (Near-Earth Object) real-time trajectory feeds.
Share this project:

Updates

Submission history