Skip to content

xfrr/threejs-solar-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌌 Three.js Solar System

A stunning real-time solar system simulation built with Three.js just for fun! Explore realistic planetary orbits, moons, and custom shaders for the Sun.

Live Demo Vite Three.js


✨ Features

  • 🪐 Realistic orbital mechanics — Planets follow accurate elliptical paths
  • 🌙 Moon systems — Satellites orbit their parent bodies
  • ☀️ Custom shaders — Beautiful Sun and Black Hole effects
  • ☄️ Meteoroid field — Dynamic instanced particles
  • 🎮 Interactive controls — Navigate freely through space
  • Performance optimized — Smooth 60fps rendering
  • 🎨 Minimalist UI — Clean settings panel for customization

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🎯 Controls

Action Key/Mouse
Rotate view Left click + drag
Zoom Mouse wheel
Pan Right click + drag

🛠️ Tech Stack

  • Three.js — 3D graphics engine
  • Vite — Build tool & dev server
  • Custom GLSL Shaders — Sun corona & black hole effects
  • Orbital Mechanics — Keplerian elements for accurate orbits

🎨 Customization

Edit CELESTIAL_BODIES in src/main.js to add or modify planets:

{
  name: "Earth",
  elements: { a, e, i, L, w, o },  // Orbital elements
  radius: 6371,                    // km
  rotPeriod: 1.0,                  // Earth days
  baseColor: 0x2233ff,
  texture: "earth.jpg"
}

🌐 Deployment

Automatically deployed to GitHub Pages via GitHub Actions on every push to main. Check out the live demo here.

📄 License

MIT


Made with ❤️ and Three.js