3D Solar System Simulation (Three.js)

A mobile-responsive 3D solar system simulation built with Three.js. It renders the Sun and eight planets (Mercury → Neptune) as 3D spheres with lighting, animated orbits, adjustable orbital speeds, labels, a starfield background, and a pause/resume control.

---

Features

• 3D Scene

  • Sun + 8 planets rendered as spheres
  • Phong materials + lighting for a more realistic look

• Orbit Animation

  • Smooth, frame-rate-independent motion using requestAnimationFrame + THREE.Clock

• Per-Planet Speed Control

  • Individual sliders to adjust each planet’s orbital speed in real time
  • Live value display next to each slider

• Bonus Features

  • Pause / Resume button
  • Background stars for a space effect
  • Planet labels for easy identification

• Responsive UI

  • Control panel scales for mobile screens using CSS media queries

---

Tech Stack

• Three.js (CDN): https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
• HTML + CSS + JavaScript (no build tools required)

Note: Because Three.js is loaded from a CDN, an internet connection is required unless you replace it with a local copy.

---

Project Structure

• index.html — Page layout (canvas + control panel)
• styles.css — Styling + responsive layout rules
• script.js — Three.js scene setup, planet creation, animation loop, UI controls
• README.md — Documentation (this file)

---

Getting Started

1) Download / Clone

• If you received a ZIP, extract it.
• Or clone the repository:

  git clone https://github.com/Nandukumar-koribilli/solar-system.git
  cd solar-system

2) Run with a local server (recommended)

Some browsers restrict loading assets/scripts when opening index.html directly. Using a local server avoids those issues.

Option A: Python

python -m http.server 8000

Then open: http://localhost:8000

Option B: VS Code Live Server

• Open the folder in VS Code
• Right-click index.html → Open with Live Server

3) Open the app

Once served, open the provided local URL in a modern browser (Chrome / Firefox / Safari recommended).

---

How to Use

1. View the simulation: The solar system loads automatically and begins animating.
2. Adjust orbital speeds: Use the sliders to change individual planet speeds; values update live.
3. Pause / Resume: Click the button to stop or restart the animation loop.
4. Responsive layout: Try resizing the window or opening on mobile to see UI scaling.

---

Notes / Assumptions

• Planet sizes and orbit distances are scaled for visibility, not astronomical accuracy.
• Animation uses requestAnimationFrame + THREE.Clock for smooth motion.
• Tested on modern browsers for performance and compatibility.

---