This project demonstrates an interactive 3D model of the solar system built with Next.js, React Three Fiber, and Three.js. It showcases how to create interactive 3D web components rendered in the browser.
- Displays the Sun and planets of our solar system in 3D space.
- Planets orbit the Sun along their respective paths.
- Hovering over a planet highlights it with an outline and pauses its orbital motion.
- Clicking on a planet displays basic information about it (Name, Orbital Speed, Color).
- Interactive camera controls (
OrbitControls) allow users to zoom (scroll) and pan (drag) the view. - Uses postprocessing effects (
Outline) for highlighting selected objects.
- Next.js
- React
- React Three Fiber
- Three.js
- TypeScript
- Tailwind CSS
- @react-three/drei (Helpers for React Three Fiber)
- @react-three/postprocessing (Postprocessing effects)
- Node.js (v16 or later recommended)
- npm, yarn, or pnpm
- Clone the repository:
git clone <your-repository-url> cd <repository-directory>
- Install dependencies:
npm install # or yarn install # or pnpm install
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev