Interactive 3D Solar System Simulation

🌟 Overview

An immersive, browser-based 3D simulation of our solar system built with Three.js. This project offers a visually appealing representation of the Sun and eight planets, complete with realistic orbits, rotations, and lighting effects.

✨ Features

• Complete Solar System: Includes the Sun and all eight planets from Mercury to Neptune
• Interactive Navigation: Rotate, pan, and zoom to explore the solar system
• Realistic Lighting: Dynamic lighting creates realistic day/night cycles on planets
• Orbital Controls: Adjust the speed of each planet's orbit in real-time
• Planet Information: Hover over planets to see their names
• Visual Customization: Toggle between light and dark mode
• Mobile Responsive: Fully functional on both desktop and mobile devices
• Performance Optimized: Smooth animation even on lower-end devices

🚀 Demo

Try out the live demo: Solar System Simulation

🛠️ Technologies Used

• Three.js: For 3D rendering and animation
• JavaScript (ES6+): Core programming language
• HTML5/CSS3: Structure and styling
• OrbitControls: For camera manipulation

🔧 Installation & Setup

1. Clone the repository:

   git clone https://github.com/yourusername/solar-system-simulation.git

2 . Navigate to the project directory:

cd solar-system-simulation
Open index.html in your browser, or use a local server:

BASH

Using Python

python -m http.server

Using Node.js

npx serve Access the simulation at http://localhost:8000 (or the port shown in your terminal)

🎮 Controls

Mouse/Touch Controls:

• Left-click + drag (or one-finger drag) : Rotate the view
• Right-click + drag (or two-finger drag): Pan the camera
• Scroll (or pinch): Zoom in/out
• Hover (or tap): View planet name
• Double-click (or double-tap): Focus on a planet

UI Controls:

• Speed sliders: Adjust orbital speed for each planet
• Pause/Resume button: Stop or continue the animation
• Theme toggle: Switch between dark and light mode
• Camera distance: Adjust the viewing distance

Keyboard Shortcuts:

• Space: Pause/Resume animation
• R: Reset camera view
• T: Toggle dark/light theme

📱 Mobile Compatibility

The simulation is fully responsive and works on:

Desktop browsers (Chrome, Firefox, Safari, Edge) Mobile browsers (iOS Safari, Android Chrome) Tablets

📚 Code Structure

index.html: Main entry point and HTML structure styles.css: All styling for the simulation UI script.js: Core simulation logic and Three.js implementation

🔄 Performance Optimization

Planetary geometries use appropriate polygon counts Lighting is optimized for performance Animation loop is efficiency-focused Mobile-specific optimizations are implemented

🧠 Learning Resources

New to Three.js? Check out these resources:

Three.js Documentation Three.js Fundamentals WebGL and Three.js Basics

🤝 Contributing

Contributions are welcome! Feel free to:

Fork the repository Create a feature branch: git checkout -b new-feature Commit your changes: git commit -am 'Add some feature' Push to the branch: git push origin new-feature Submit a pull request

📜 License

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

🙏 Acknowledgements

Planet color schemes inspired by NASA imagery OrbitControls implementation from Three.js examples Thanks to the Three.js community for their excellent documentation and examples

Tags/Topics

• threejs
• solar-system
• 3d-visualization
• javascript
• interactive
• astronomy
• educational
• webgl
• html5
• css3
• animation
• simulation
• space
• planets
• responsive-design
• data-visualization

LICENSE