This project presents a 3D visualization of the solar system using Three.js, allowing users to explore the various celestial bodies from the comfort of their browser. Users can click on different buttons associated with different celestial bodies to view detailed information on the server terminal, and control the camera to get different views of the solar system.
- 3D Visualization: Detailed 3D models of planets and their orbits.
- Interactive Controls: Users can manipulate the camera to explore the solar system from different angles.
- Planet Details: Click on any celestial body's button to get detailed information on the server terminal such as its diameter, distance from the sun, and interesting facts.
demo1.mov
demo2.mov
- Three.js: For 3D visualization
- React: UI library used for handling the frontend
- Node.js and Express: Backend server to serve the planet data
- MySQL: Database to store information about the planets
To get this project running on your local machine, follow these steps:
-
Clone the Repository
git clone https://github.com/zainkarim/solar-system-model.git cd solar-system-model
-
Install Dependencies
npm install
-
Database Setup
- Make sure MySQL is installed on your system.
- Create a database named
solar_system
and import the provided SQL script to set up your tables:CREATE DATABASE solar_system; USE solar_system; SOURCE solar_system.session.sql;
-
Environment Variables
- Set up your
.env
file in the server directory with the following contents:DB_HOST=localhost DB_USER=your_mysql_username DB_PASS=your_mysql_password DB_NAME=solar_system PORT=5001
- Set up your
-
Start the Server
node index.js
-
Run the Client
npm start
Once the installation is complete and both the server and client are running:
- Open your browser to
http://localhost:3000
. - Use the mouse to rotate and zoom the camera.
- Click on any celestial body's button to display detailed information about it in the development terminal.
Distributed under the MIT License. See LICENSE
for more information.
Project Link: https://github.com/zainkarim/solar-system-model