I built a fully interactive 3D Solar System you can explore right from your browser.

#javascript #vibecoding #vite #coding

🪐 Explore the Cosmos from Your Browser

I’m stoked to share my recent project: 3D Solar System Simulation, crafted with Three.js and accelerated with Vite! Tap into the wonders of our cosmic neighborhood through your screen—no telescopes needed.

🔗 Check out the live project below:

https://3d-solar-system-three-js.vercel.app/

📸 Gallery Snapshot

💡 Why I Built It

To visualize planetary orbits, rotations, and atmospheres in real-time
To flex the power of Three.js combined with modern tooling like Vite
To experiment with interactive controls and responsive design
To have a fun showcase for learning and collaboration

🚀 Project Highlights

Realistic 3D models of the Sun, planets, dwarf planets, and moons
Smooth orbit animations combined with planet rotations
Scaled visuals for better clarity and navigation
Full interaction via mouse: orbit, zoom, and pan
Modern tooling with Vite for blazing-fast development
Mobile-friendly interface with responsive scaling

🛠 Behind the Scenes

3d-Solar-System-ThreeJS/
├── public/
│   └── textures/             # Planet & celestial textures
├── src/
│   ├── main.js               # Core rendering logic
│   └── additional modules... # Planet classes, UI controls, etc.
├── index.html
├── package.json
├── vite.config.js
└── README.md

⚡ Installation & Local Run

Clone and run locally:

git clone https://github.com/SoumyaEXE/3d-Solar-System-ThreeJS.git
cd 3d-solar-system-three-js
npm install
npm run dev

Then visit

http://localhost:5173

To build a production version:

npm run build

📚 What I Learned

Skill	Takeaway
Three.js fundamentals	Scene setup, camera controls, mesh rendering
Animation techniques	Smooth orbits & rotations using `requestAnimationFrame`
Performance tuning	Optimized for smoother animations with Vite
Responsive design	UI/UIX that works seamlessly across devices