3D Solar System Simulation

This project is a 3D Solar System simulation built using Three.js, a WebGL-powered JavaScript 3D library. It visually represents the sun and all eight planets orbiting in space with basic interactivity and UI controls.

---

🚀 Features

• Realistic 3D planets orbiting a central sun
• Texture-based visual appearance for planets
• Dynamic orbiting animation
• Speed controls for each planet
• Pause/Resume control

---

🗂 File Structure

project-root/
├── index.html        # Main HTML file
├── main.js           # JavaScript logic using Three.js
├── style.css         # Styles for UI
└── assets/           # Planet and sun textures (e.g. earth.jpg, sun.jpg)

---

✅ How to Run

Option 1: Using Live Server (Recommended)

1. Open this folder in VS Code
2. Install the "Live Server" extension
3. Right-click index.html → Open with Live Server
4. App opens at http://localhost:5500

Option 2: Python Local Server

python3 -m http.server

Then open http://localhost:8000 in your browser.

⚠️ Do NOT open via file:// directly — imports will fail.

---

🧠 Code Walkthrough

index.html

• Links styles and canvas for rendering
• Adds control panels (pause, theme toggle, star toggle)
• Loads main.js as a JavaScript module

style.css

• Styles the layout, controls, and tooltip labels
• Adds light/dark theme toggle classes

main.js

1. Scene Setup

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer(...);

Initializes the 3D world, camera perspective, and renderer on the <canvas>.

2. Lighting and Textures

scene.add(new THREE.AmbientLight(...));
scene.add(new THREE.PointLight(...));

Adds light sources so the planets and sun can be seen clearly.

3. Sun and Planet Creation

new THREE.SphereGeometry(...) → creates a sphere
new THREE.MeshStandardMaterial(...) → applies planet texture

Each planet is represented as a textured sphere. Positions are animated over time.

4. Controls

const controls = new THREE.OrbitControls(...);

OrbitControls lets you drag/zoom the camera manually with the mouse.

5. Speed Sliders

input type="range" → adjusts orbital speed

Each slider changes how fast the corresponding planet orbits.

6. Animation Loop

function animate() {
  planet.position.x = Math.cos(angle) * distance;
  planet.position.z = Math.sin(angle) * distance;
  renderer.render(...);
}

This function runs continuously and updates planet positions to simulate orbiting.

7. Starfield Background

THREE.Points(...) → simulates distant stars

Toggle visibility using the checkbox.

📦 Assets Needed (Place in assets/ Folder)

earth.jpg
mars.jpg
jupiter.jpg
saturn.jpg
uranus.jpg
neptune.jpg
venus.jpg
mercury.jpg
sun.jpg

Make sure all textures match the planet names in lowercase with .jpg extension.