Solar System Simulator

An interactive 3D solar system simulator built with React, Three.js, and TypeScript. Designed for educational use, particularly for teaching geography and astronomy to high school students.

Features

Core Simulation

• Accurate orbital mechanics - Planets and moons follow Keplerian orbits calculated from real astronomical data
• Real-time simulation - Watch the solar system evolve in real-time or at accelerated speeds (up to 1 year per second)
• Time controls - Play, pause, reverse time; jump to specific dates
• Astronomical event navigation - Quick jump to equinoxes and solstices

Celestial Bodies

• Sun with animated surface and corona glow
• 8 planets with accurate orbital parameters
• Major moons including Earth's Moon, Galilean moons (Io, Europa, Ganymede, Callisto), Titan, Enceladus, Titania, and Triton
• Saturn's rings with proper shading and transparency
• Atmospheric effects for Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, and Titan

Visualization

• Orbit lines - Toggle orbital paths for all bodies
• Labels - Bilingual labels (English/Hungarian) for all celestial bodies
• Axial tilt display - Show rotation axis, equator, tropics, arctic circles
• Prime meridian - Rotates with planet surface
• Subsolar point - Line showing where sun rays hit at 90 degrees
• Starfield - Realistic background stars with twinkling effect
• Bloom effects - Sun glow using post-processing

Educational Features

• Location marker - Set your location (default: Budapest) to see a marker on Earth with real-time day/night status and local solar time
• Day/night terminator line - Visible glowing line showing the boundary between day and night on Earth
• Seasonal indicators - Current season display for both hemispheres with progress percentage and sun declination
• Rotation axis visualization - See how axial tilt affects seasons
• Major circles - Equator, Tropic of Cancer/Capricorn, Arctic/Antarctic circles
• Smooth fade - Axis/circles fade based on camera distance
• Depth-aware labels - Labels hide when behind planets
• Accurate Earth rotation - Earth's rotation is synchronized with real time using sidereal time calculations

Internationalization

• English - Full translation
• Hungarian (Magyar) - Full translation including:
  • Planet names (Merkur, Venusz, Fold, Mars, Jupiter, Szaturnusz, Uranusz, Neptunusz)
  • Scientific terms (Tengelydoles, Keringesi ido, Fel nagytengely)
  • UI elements and labels

User Interface

• Navigation panel - Quick access to all celestial bodies
• Info panel - Detailed information about selected body
• Settings panel - Display options, quality settings, language selection
• Mobile support - Bottom navigation bar and slide-up sheets for mobile devices
• Responsive design - Works on desktop and mobile

Tech Stack

• React 19 - UI framework
• Three.js - 3D rendering
• TypeScript - Type safety
• Zustand - State management
• Vite - Build tool
• Vitest - Testing framework

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/artalis-io/solsys.git
cd solsys

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build
npm run preview

Run Tests

npm run test

Project Structure

src/
├── components/          # React components
│   ├── App.tsx
│   ├── InfoPanel.tsx
│   ├── NavigationPanel.tsx
│   ├── SettingsPanel.tsx
│   ├── SolarSystemCanvas.tsx
│   ├── TimeControls.tsx
│   ├── MobileNavBar.tsx
│   └── MobileSheet.tsx
├── data/
│   ├── celestialBodies.ts  # Orbital & physical data
│   └── types.ts
├── i18n/                # Internationalization
│   ├── index.ts
│   ├── types.ts
│   └── translations/
│       ├── en.ts
│       └── hu.ts
├── physics/
│   ├── OrbitalMechanics.ts       # Kepler's equations
│   └── OrbitalMechanics.test.ts  # Unit tests
├── store/
│   └── index.ts         # Zustand stores
└── three/               # Three.js scene
    ├── SolarSystemScene.ts
    ├── objects/
    │   ├── CelestialBody.ts
    │   └── Starfield.ts
    ├── shaders/
    │   ├── atmosphereShader.ts
    │   ├── earthShader.ts
    │   ├── ringShader.ts
    │   └── sunShader.ts
    └── utils/
        └── TextureLoader.ts

Controls

Input	Action
Left Click + Drag	Rotate view
Right Click + Drag	Pan view
Scroll	Zoom in/out
Click on body	Select & navigate to body

Credits

• Textures: NASA Visible Earth, Solar System Scope
• Orbital Data: NASA JPL Horizons
• Developed for: Eotvos Gimnazium, Budapest

License

MIT License

Roadmap

• Day/night terminator visualization
• Seasonal indicators for Earth
• Location marker with day/night status
• Eclipse predictions
• Distance measurement tool
• Guided educational tours
• Improved moon orbital accuracy
• Additional languages