Solar System Visualization

An interactive 3D visualization of the solar system built with Three.js. Explore planets, their moons, and orbital dynamics in real-time with adjustable playback speeds and accurate astronomical data.

Features

• 8 Planets + Sun: Rendered with textured spheres at relative scales
• Moons: Includes major moons for Earth, Mars, Jupiter, Saturn, Uranus, and Neptune
• Accurate Orbital & Rotation Data: Based on real astronomical periods and sizes
• Orbit Guides: Visual lines showing planet and moon orbital paths
• Real-time Time Counter: Displays elapsed time in Earth years
• Planet & Moon Labels: Floating DOM labels with dynamic screen-space projection
• Interactive Controls:
  • WASD to move, Q/E for vertical movement
  • Mouse click to lock/unlock pointer control
  • Teleport Panel: Jump camera to any planet or moon
  • Playback Speed Slider: Control animation speed (0.1x – 5x)
  • Solar Flare Intensity Slider: Adjust Sun corona/flare brightness
  • Reset Button: Return to default settings
• Starfield: 6000+ distant stars in a spherical shell background
• Visual Effects: Animated Sun corona with shader, procedural flares, Saturn and Uranus rings

Controls

Control	Action
Click	Lock/unlock mouse pointer
W	Move forward
A	Move left
S	Move backward
D	Move right
Q	Move up
E	Move down
Esc	Release mouse lock
Playback Slider	Speed up/slow down time (YouTube-like)
Solar Flare Slider	Adjust Sun visual effects intensity
Reset	Restore default settings
Teleport Buttons	Jump to planets or moons

Project Structure

.
├── index.html           # Entry point
├── style.css            # UI and layout styling
├── js/
│   └── main.js          # Three.js scene, planets, moons, animation
└── img/
    ├── sun_hd.jpg
    ├── earth_hd.jpg
    ├── mercury_hd.jpg
    ├── venus_hd.jpg
    ├── mars_hd.jpg
    ├── jupiter_hd.jpg
    ├── saturn_hd.jpg
    ├── uranus_hd.jpg
    └── neptune_hd.jpg

Technical Stack

• Three.js (v0.129.0): 3D graphics via CDN
• PointerLockControls: First-person camera movement
• Canvas Textures: Procedurally generated ring bands and Sun effects
• Shader Materials: GPU-accelerated Sun corona animation
• DOM Projection: World-to-screen-space label positioning

Key Data

Planets (Relative Radii, Orbital Periods)

Planet	Radius (Earth = 1)	Orbital Period (Days)	Rotation Period (Hours)
Mercury	0.38	87.97	1407.6
Venus	0.95	224.7	2802
Earth	1.0	365.25	24
Mars	0.53	686.97	24.62
Jupiter	11.21	4331	9.93
Saturn	9.45	10747	10.66
Uranus	4.01	30589	17.24
Neptune	3.88	60182	16.11

Major Moons Included

• Earth: Moon
• Mars: Phobos, Deimos
• Jupiter: Io, Europa, Ganymede, Callisto
• Saturn: Titan
• Uranus: Titania
• Neptune: Triton

Running Locally

1. Clone or download this repository
2. Open index.html in a modern web browser (Chrome, Firefox, Safari, Edge)
3. Click on the canvas to enable mouse control
4. Use keyboard and UI controls to navigate

No build process or dependencies required—just open and explore!

Technical Notes

• Orbit Scaling: Orbital radii are scaled by a factor (350) to make the solar system viewable within a reasonable scene size while preserving relative accuracy
• Playback Speed: The single playback speed slider uniformly scales all orbital and rotational motion, ensuring the Earth-years counter stays accurate
• Moon Orbits: Each moon has its own thin orbit guide that follows its parent planet
• Performance: Starfield (6000 points) and planet rings use optimized buffer geometries and point materials for smooth rendering
• Browser Support: Requires WebGL support (all modern browsers)
• Orbit Radius Scale: 350 scene units per AU ensures planets and moons remain visible without excessive camera zooming
• Time Accuracy: 1 Earth year is computed from the same angular rate used for orbital animation, ensuring accurate time tracking

Future Enhancements

• Moon textures with high-resolution imagery
• Asteroid belt and Kuiper belt visualization
• Comet and meteor effects
• Orbital velocity and physics accuracy toggles
• Performance HUD with frame rate and object count
• Mobile touch controls
• 3D terrain for Moon and Mars surfaces

Credits

Built with Three.js. Planetary and moon data sourced from NASA JPL Horizons.