🌌 CelestiaJS

A timeless voyage through code and cosmos.

---

📜 Table of Contents

1. 📖 Introduction
2. 🚀 Live Demo
3. 🎯 Why It Matters
4. 🌍 Features
5. 🔧 How It Works
6. 🕹️ Controls
7. 🛠️ Getting Started
8. 🧭 Roadmap
9. 📚 Credits & Inspiration
10. 📝 License

---

📖 Introduction

Welcome, cosmic traveler. This is a 3D interactive simulation of our solar system, beautifully rendered using Three.js.
Each planet orbits in real-time, with realistic lighting, orbital speeds, and mouse-controlled camera interaction — all running live in your browser.

---

🚀 Live Demo

🌐 Explore the Universe Now → Launch Live Simulation

---

🎯 Why It Matters

• 🔬 Science meets code — bring astronomical models to life
• 🎨 Visual & interactive — great for learning and demoing
• 🧠 Ideal for students — blend of coding, 3D graphics, and space education
• 💼 Portfolio-worthy — standout project using WebGL + JavaScript

---

🌍 Features

• 🪐 3D sun + 8 orbiting planets with textures
• 🌀 Real-time animations and self-rotations
• 🎛️ Sidebar sliders to adjust orbital speeds live
• ⏸️ Pause and resume simulation
• 🌗 Toggle between Light and Dark mode
• 🧭 Interactive camera controls (zoom, pan, rotate)
• 📱 Responsive UI for all screen sizes
• 🛰️ Hover tooltips showing planet names
• 🌌 Starfield background for galactic immersion

---

🔧 How It Works

🪐 Planets & Orbits

• Each planet is a THREE.Mesh using SphereGeometry, sized proportionally and textured with MeshStandardMaterial.
• Planet meshes are nested in THREE.Object3D containers that orbit around the sun by rotating around the y-axis.

🔁 Orbit Rings

• Rings are created using THREE.RingGeometry for each planet's path, laid flat in the xz-plane.

💫 Saturn’s Rings

• Custom RingGeometry mesh with texture is added to Saturn's body for realistic visuals.

🔦 Lighting

• A bright point light simulates the sun, with subtle ambient light for balanced shading.

🔄 Animation

• The render loop updates both axial and orbital rotation using individual speed multipliers controlled by sliders.

---

🕹️ Controls

• 🎚 Adjust each planet's orbit speed in real-time
• ⏯ Pause/resume the animation with a single button
• 🌗 Switch between light/dark themes
• 📱 On mobile, use the hamburger menu to toggle controls
• 🛰 Hover over planets to reveal their names

---

🛠️ Getting Started

1. Prerequisites

• Node.js (v14+ recommended)
• Modern WebGL-supported browser (Chrome, Firefox, Edge)

2. Clone the Repository

git clone https://github.com/ikrishanaa/three.js-solar-system.git
cd three.js-solar-system

3. Run Locally (Optional if just opening HTML)

You can simply open index.html directly in your browser, or for live server:

npm install
npm start

Then open:
http://localhost:3000

---

🧭 Roadmap

• Planet info panels with real data
• Add asteroid belt and comet animations
• Add moons for Jupiter, Earth, etc.
• Background audio with toggle
• Mobile UI optimization
• "Realism Mode" for true scale & orbit speed

---

📚 Credits & Inspiration

• Three.js — main WebGL engine
• NASA — planet textures and data
• Inspired by:
  • Sanderblue/solar-system-threejs
  • dumitrux/solar-system-threejs
  • N3rson/Solar-System-3D

---

📝 License

This project is licensed under the MIT License.
Feel free to use, modify, and share with credit.

---

✨ "To confine our attention to terrestrial matters would be to limit the human spirit."
— Stephen Hawking