Mar 26, 2024

Solar system

Interactive 3D representation of the solar system using Three.js

#3D Solar System Representation

Welcome to the Solar System 3D Model project! This interactive 3D representation of the solar system was meticulously developed using Next.js with TypeScript to provide a visually stunning and educationally enriching experience. Dive into an immersive simulation where the celestial dance of our solar system comes to life with accurate planetary rotations, a glowing sun, and the majestic rings of Saturn.

Live Demo: Solar System 3D Representation

#Features

  • Realistic Solar Representation: At the heart of our model is a luminous Sun with a bloom effect, creating a glow that mimics the real-life brilliance of our star.

  • Saturn's Rings: A detailed and animated representation of Saturn's rings, showcasing their iconic tilt and rotation.

  • Accurate Planetary Orbits: Each planet orbits the Sun at its 'actual' speed, offering an educational glimpse into the mechanics of our solar system.

  • Orbital Paths: Visible paths that each planet follows around the Sun, enhancing the understanding of celestial movements.

  • Speed Adjustment: A user-friendly speed changer allows you to adjust the orbital velocity of the planets, making it easier or faster to observe their movements around the Sun.

  • 3D Planetary Rotation: All planets are not just revolving; they’re also rotating on their axes, contributing to a more dynamic and realistic simulation.

  • Hover Effects: When hovering over a planet, its movement stops, and its name is displayed for identification. When the hover ends, the planet resumes its movement from its current position.

  • Click Interaction: Clicking on a planet displays detailed information about it, including its speed, description, and other relevant data.

#Quick Start Guide

#Prerequisites

Before launching the Solar System 3D Model, ensure you have the following requirements met:

  • A modern web browser that supports WebGL (e.g., Google Chrome, Mozilla Firefox, Safari).
  • Node.js installed on your system for local development and testing.

#Installation

Clone the Repository:

git clone https://github.com/R1ck404/solar-sytem.git
cd solar-system

Install Dependencies:

Run the following command in the root directory of your project:

npm install

Run the Project:

Once the dependencies are installed, you can start the project by running:

npm run dev

This command will compile the project and host it on a local web server. You will be provided with a URL to access the Solar System 3D Model in your web browser.

  • Zoom in/out: Use the mouse wheel to zoom in and out for a closer look at the planets or to get an overview of the entire solar system.
  • Pan: Click and drag the mouse to pan around the space and view the solar system from different angles.
  • Adjust Speed: Locate the speed control slider on the interface to increase or decrease the orbital speed of the planets.
  • Explore Planetary Details: Click on any planet to get more information about it.

#Development

This project was developed in a marathon 8-hour coding session, leveraging the power of Next.js with TypeScript for efficient development and maintenance. The primary focus was on achieving a balance between performance and visual fidelity to ensure smooth interactions on most modern devices.

#Technologies Used

  • Next.js: A React framework for building server-side rendered and statically generated applications.
  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript, enhancing code quality and developer productivity.
  • Three.js: A powerful JavaScript library and API used to create and display animated 3D computer graphics in a web browser.
  • WebGL: The underlying technology that allows Three.js to render graphics in the browser without the need for plugins.
  • JavaScript: The scripting language used to create dynamic content on the web, powering the interactivity of the Solar System 3D Model.

#Contributing

We welcome contributions to the Solar System 3D Model project! Whether it's reporting a bug, discussing improvements, or even suggesting new features, your feedback is invaluable. Please feel free to fork the repository, make changes, and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.

#License

This project is licensed under the MIT License - see the LICENSE.md file for details.

#Acknowledgements

  • A special thanks to the Next.js, TypeScript, and Three.js communities for providing extensive documentation and examples that greatly facilitated the development of this project.
  • This project was inspired by a passion for astronomy and the beauty of our solar system. It's dedicated to educators, students, and anyone curious about the cosmos.

Enjoy exploring the solar system like never before with this interactive 3D model!