https://github.com/iinaa-eimrit/universe-explorer-3d

Universe Explorer 3D is an interactive web-based simulation that allows users to explore a 3D solar system. Built using React Three.js, it features realistic orbital movements, clickable planets, and an immersive space journey. The project demonstrates advanced 3D rendering, animation, and UI interactivity in a modern web environment.
https://github.com/iinaa-eimrit/universe-explorer-3d

framer-motion nextjs radix-ui reactjs tailwindcss threejs

Last synced: about 18 hours ago
JSON representation

Universe Explorer 3D is an interactive web-based simulation that allows users to explore a 3D solar system. Built using React Three.js, it features realistic orbital movements, clickable planets, and an immersive space journey. The project demonstrates advanced 3D rendering, animation, and UI interactivity in a modern web environment.

• Host: GitHub
• URL: https://github.com/iinaa-eimrit/universe-explorer-3d
• Owner: iinaa-eimrit
• Created: 2024-11-27T20:21:50.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-27T20:56:51.000Z (2 months ago)
• Last Synced: 2025-01-26T13:13:38.206Z (about 18 hours ago)
• Topics: framer-motion, nextjs, radix-ui, reactjs, tailwindcss, threejs
• Language: TypeScript
• Homepage: https://universe-explorer-3-d.vercel.app
• Size: 114 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🌌 Universe Explorer 3D

Explore the wonders of the cosmos with **Universe Explorer 3D**—an interactive web-based solar system simulation that lets you navigate through planets, orbits, and the mysteries of space. Built using **React Three.js** and **Next.js**, this project combines stunning 3D visualizations with an intuitive user experience.

---

## 🚀 Features

- **🌍 3D Solar System Visualization**  

  Realistic 3D models of planets and the Sun with proportional scaling and spatial accuracy.

- **🪐 Interactive Planets**  

  Click on any planet to reveal its name and description through an animated info panel.

- **✨ Smooth Animations**  

  Real-time orbital rotations and dynamic planetary movements for an immersive experience.

- **📈 Orbit Lines**  

  Visible paths showcasing each planet's orbit for better spatial understanding.

- **💻 Modern UI Design**  

  Clean, responsive, and user-friendly interface with intuitive controls.

---

## 🔧 Tech Stack

- **Frontend Framework**: [Next.js](https://nextjs.org/)

- **3D Rendering**: [React Three.js](https://docs.pmnd.rs/react-three-fiber/getting-started) and [Three.js](https://threejs.org/)

- **UI Styling**: [Tailwind CSS](https://tailwindcss.com/)

- **Animation**: [Framer Motion](https://www.framer.com/motion/)

- **UI Components**: [Radix UI](https://www.radix-ui.com/)

- **State Management**: React Hooks and Context API

- **Programming Languages**: TypeScript and JavaScript

---

## 🛠️ Setup and Installation

1.  **Clone the repository:**

    `git clone https://github.com/yourusername/universe-explorer-3d.git

    cd universe-explorer-3d` 

    

2.  **Install dependencies:**

    `npm install` 

    

3.  **Run the development server:**

    `npm run dev` 

    

4. **Open the app in your browser:** Navigate to `http://localhost:3000`.