Skip to content

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.

Notifications You must be signed in to change notification settings

oscardaly/R3F-Galaxy

Repository files navigation

Building Interactive 3D Web Applications with React-Three-Fiber

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.

Features

  • 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.

Technologies Used

Getting Started

Prerequisites

  • Node.js (v16 or later recommended)
  • npm, yarn, or pnpm

Installation

  1. Clone the repository:
    git clone <your-repository-url>
    cd <repository-directory>
  2. Install dependencies:
    npm install
    # or
    yarn install
    # or
    pnpm install

Running the Development Server

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published