An interactive 3D solar system simulation to explore orbital motion, scaling, and real-time visualization in the browser
Download and install Node.js and run the following commands in the project's root directory:
# Install dependencies (only the first time)
npm install
# Run the local server and click on the link generated [Default:](http://localhost:5173/)
npm run dev
# Build for production in the dist/ directory (optional)
npm run buildhttps://solar-simulation-reboot.vercel.app
- Click on the controls dropdown arrow to bring up the control panel.
- Orbit Controls: Click and drag to orbit the camera around the scene.
- Pan: Click and drag with the right mouse button to pan the camera.
- Zoom: Use the mouse wheel to zoom in and out.
- Click Selection: Click on any celestial body to focus the camera on it (desktop only).
- GUI Selection: Use the "Follow" dropdown menu in the GUI to select and focus on a specific celestial body.
- Point Light: Adjust the intensity slider to simulate the light intensity from the sun.
- Ambient Light: Use the slider to adjust ambient light. This will affect all objects in the scene.
- Hemisphere Light: Adjust the intensity, sky colour, and ground colour to add additional lighting effects to the entire scene.
- Speed Slider: Adjust the speed of the simulation using the slider.
- Reset: Click the "Reset" button to reset the simulation speed to its default value.
- Stats: Toggle the
show statscheckbox to display performance metrics, like framerate, and frametime. - Click on the performance metrics to switch between them.
- Three.js - 3D rendering library
- Lil-GUI - GUI library for Three.js
- Stats.js - Performance monitoring library
- NASA-3D-Resources - Moon textures
- solarsystemscope - Planet textures
- wwwtyro.net - Environmental map
- Ian McEwan, Ashima Arts and Stefan Gustavson - noise shader used for the sun.
This project is licensed under the MIT License - see the LICENSE file for details.