Solar System Simulation

An interactive 3D solar system simulation built with Three.js and Vite. This project allows you to explore our solar system with accurate planet scaling, textures, orbits, and interactive controls.

✨ Live Demo ✨

👆 Click the button above to experience the interactive Solar System 🪐

🚀 Features

• Realistic Planet Rendering: All planets in our solar system with accurate textures
• Interactive Controls: Orbit around the solar system using mouse controls
• Customizable Settings: Control simulation speed, orbit visibility, and more
• Visual Effects: Bloom effect for celestial objects
• Planet Information: Details about each planet's characteristics
• Responsive Design: Works on desktop and mobile devices

📋 Prerequisites

• Node.js (version 14.x or higher)
• npm or yarn

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/Dev-roxy/solar-system.git
   cd solar-system

2. Install dependencies:

   npm install
   # or
   yarn

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser and navigate to:

   http://localhost:5173
   

🎮 Usage and Controls

• Orbit: Click and drag to orbit around the solar system
• Zoom: Use mouse wheel to zoom in and out
• GUI Controls:
  • Adjust rotation speed
  • Toggle planet and moon orbit visibility
  • Play/pause animation
  • Enable/disable bloom effect
  • Adjust ambient light intensity
  • Control individual planet orbit speeds

🧩 Project Structure

• index.html - Main HTML entry point
• index.js - JavaScript entry point
• setupScene.js - Three.js scene configuration
• data.js - Planet and solar system data
• createPlanet.js - Planet creation logic
• animate.js - Animation loop
• gui.js - User interface controls
• config.js - Configuration settings
• utils/ - Utility functions
• public/textures/ - Planet textures

🔧 Customization

Modify the config.js file to change default settings:

export const config = {
  speed: 1, // Default speed for rotation and orbiting
  showOrbitLines: {
    planets: false, // Show planet orbits
    moons: false, // Show moon orbits
  },
  orbitlinesSize: 0.05, // Orbit line thickness
  isPlaying: true, // Play/pause animation state
  isBloomEnabled: true, // Bloom postprocessing effect toggle
};

🖥️ Technologies Used

• Three.js - 3D graphics library
• lil-gui - UI controls
• Vite - Frontend build tool

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• Planet textures from Solar System Scope
• Three.js community for examples and documentation
• NASA for planetary data and inspiration

---

Created by Dev-roxy | © 2025