🌌 Solar System Simulation - React Three Fiber

An interactive 3D solar system built using React Three Fiber, TypeScript, and Tailwind CSS, enhanced with responsive UI components and realistic celestial animations. Explore planets, control the camera, and learn about our solar system—all in your browser.

🚀 Features

• 🌞 Realistic solar system with orbiting planets and sun effects (corona, lens flare)
• 🌍 Scaled planetary motion and distances (visually optimized)
• 📱 Mobile-friendly experience with auto-rotation and responsive layout
• 🎛️ Interactive controls for camera and system speed
• 🛰️ Modular and extensible component architecture
• 🎨 ShadCN UI integration for polished design system

🛠️ Tech Stack

• React + TypeScript
• React Three Fiber (Three.js)
• Tailwind CSS
• Vite
• ShadCN UI
• Custom Hooks for mobile detection and toast notifications

📁 Project Structure

├── public/               # Static assets
├── src/
│   ├── components/       # UI & 3D scene components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   ├── pages/            # Routing pages
│   ├── App.tsx           # Main app layout
│   └── main.tsx          # App entry point
├── tailwind.config.ts    # Tailwind CSS configuration
├── vite.config.ts        # Vite config
└── README.md             # You're here

🧪 Run Locally

Clone the repository

git clone https://github.com/pratham22r/pratham22r-solarsystemthreejs.git
cd pratham22r-solarsystemthreejs

Install dependencies

npm install

Start the dev server

npm run dev
Project runs at: http://localhost:5173

📦 Build for Production

npm run build

✨ Todo / Enhancements

Add background starfield & galaxy environment

Enable planet info modal with educational data

Improve accessibility and keyboard navigation

🧑‍💻 Author

Pratham Raghuvanshi GitHub: @pratham22r

🪐 License

This project is licensed under the MIT License.

Made with ☕ and 💻 in the infinite universe ✨