Hello to all my fellow tech enthusiasts,

Today, I'm excited to share with you an exploration into the fantastic world of 3D graphics - a realistic, dynamic Earth and Moon model built with Three.js.

Why Three.js?

Three.js is a versatile library that simplifies the process of working with WebGL. I chose it for its rich features and the sheer ease of creating detailed 3D graphics, which made it the perfect choice for this project.

Creating the Earth and Moon Spheres

The journey began with the creation of two simple spheres: one for Earth and one for the Moon. The real magic, though, started when texture was added to these basic forms.

For the Earth, I used actual scans of our planet's surface, which provided an incredibly detailed and authentic visual texture. For the moon, I used real lunar scans. These scans ensured that the models would look as realistic as possible, with all the geographical details accurately represented.

Bump Mapping: A Touch of Reality

To add depth to the models and enhance their realism, I used a technique known as bump mapping. Bump mapping is a fantastic way to create the illusion of depth on the surface of an object by modifying its lighting. By overlaying a bump map onto the scans of Earth and Moon, I was able to create a pseudo 3D effect, resulting in a more rugged and realistic surface appearance for both celestial bodies.

Simulating the Atmosphere with Cloud Overlay

One of the unique features of our planet is its vibrant atmosphere, which plays a crucial role in making Earth look the way it does from space. To emulate this in the model, I applied a cloud overlay on top of the Earth texture. This layer added depth and dynamism to the Earth model, giving it a realistic atmospheric effect.

Orchestrating the Cosmic Dance

With the Earth and Moon models ready, the next step was to set them in motion. I set up a revolving animation to make the Moon orbit the Earth, emulating the natural movement of these celestial bodies. The resulting animation brought the entire scene to life, creating a mini cosmos right on the screen.

Experience the Cosmos

For a firsthand experience of this 3D masterpiece, visit my previous website's hero section. There, you'll find the Earth and Moon suspended in their cosmic dance.