3D Solar System in THREE.js

A 3D Solar System simulation project, a dynamic and interactive simulation of our solar system created using THREE.js and the Vite framework. This project showcases various advanced features and effects to provide an immersive experience of the celestial bodies in our solar system.

Overview available at: https://w21030911.nuwebspace.co.uk/graphics/assessment/

Features

Standard Setup

• Scene, Camera, Renderer: Basic setup for rendering 3D scenes using THREE.js.
• Controls: Interactive controls for navigating the 3D space.
• Texture Loaders: Efficient loading of textures for planets, moons, and other objects.

Postprocessing Effects

• BloomPass: Adds a glowing effect to the Sun.
• OutlinePass: Highlights planets with a white outline when hovered over.
• EffectComposer: Manages and combines all postprocessing effects for rendering.

Star Background

• A realistic starry sky that provides a beautiful backdrop for the solar system.

Interactive Controls

• dat.GUI: Allows users to adjust parameters such as orbit speed and the intensity of the Sun's glow.

Lighting

• AmbientLight: Provides soft lighting throughout the scene.
• PointLight: Positioned at the center of the Sun to cast realistic shadows.

Detailed Planet Creation

• Attributes: Size, position, tilt, texture, bump material, rings, and atmospheres.
• Moons: Includes moons with realistic textures and orbits.
• Special Materials: Earth’s ShaderMaterial for day/night transitions and moving clouds.
• Non-Spherical Moons: Phobos and Deimos are modeled from 3D objects for realism.

Realistic Orbits and Rotations

• Planets and moons orbit the Sun and rotate on their axes with scaled distances and speeds.
• Scaled sizes for better visual representation: Mercury, Venus, Earth, Mars, and Pluto are at actual scale, while larger planets are scaled down for balance.

Shadows

• Realistic shadow casting from the PointLight at the Sun’s center.

Asteroid Belts

• Procedurally Generated: 1000 asteroids for the belt between Mars and Jupiter, 3000 for the Kuiper belt.
• Performance Optimization: Simplified textures to ensure high performance.

Select Feature

• Hover Effect: White outline around planets when hovered.
• Zoom In: Camera zooms in and displays planet details on click.
• Zoom Out: Returns to default view on closing the pop-up.

Resources

3D objects and textures were sourced from the following free repositories:

• NASA 3D Resources
• Solar System Scope Textures
• Planet Pixel Emporium
• TurboSquid

Feel free to contribute, suggest improvements, or use this project as a foundation for your own THREE.js experiments. Happy exploring!