solar system

[Three.js] Create the Milky Way Skybox

0

This post is the final step of our solar system project using Three.js. We will add a realistic Milky Way background. This will enhance the feeling of exploring the solar system. To do this, we will create a large cube with Milky Way texture on the inner face of the cube.

[Three.js] Make the Sun Shine

0

This post explains how to apply a bloom effect to specific objects in a Three.js scene using multiple EffectComposer instances and layers. By leveraging Three.js Layers, objects that require the bloom effect are isolated into a dedicated layer. A “bloom composer” renders only these objects wit...

[Three.js] Create a Realistic Phobos with Irregular Shape

0

Until now, I’ve illustrated celestial bodies as a completely spherical shapes: Earth, Sun, and Saturn. They have enough gravity to form nearly smooth, spherical shapes. However, Phobos, one of Mars’ moons, has an irregular shape due to its low mass and weak gravity, which aren’t strong enough ...

[Three.js] Create a Realistic Saturn with Rings

0

In the solar system, there are two main types of planets: rocky and gas giants, some of which have rings. Among them, Saturn is the most well-known gas giant with prominent rings. This project focuses on creating a realistic 3D model of Saturn, with a detailed representation of its rings, surf...

[Three.js] Create a Realistic Sun with Shaders

0

In the previous article1, we’ve created a realistic Earth. Unlike the Earth that consists of solid elements, the sun is full of gas. In order to render a gas flowing through the surface of the sun, I’ll utilize fractal noise, a.k.a., fractal Brownian motion, that is mentioned at here2. Also, I...

[Three.js] Create a Realistic Earth with Shaders

0

Let’s return to creating a realistic Earth using Three.js. Unlike the previous Earth1, we are going to render Earth using shader material. First, we will describe the day and night with two different textures, since there are city lights at night. Second, I’ll make an effect for mountain shado...

[Three.js] Scene Graph

0

Sun-Earth system In this article, I’ll create a simple Sun-Earth system. Firstly, create an orange sphere and a blue sphere which represent the Sun and the Earth, respectively.

[Three.js] How to Create the Solar System

0

The above image is the snapshot of a solar system simulator.1 The posts will be serialized in the order of contents below. https://portfolio.sangillee.com/apps/solar ↩

[Application] Solla Solar

0

Solla Solar is a simple 2D solar system simulator. By manipulating the screen, you can observe the past, present, and future of the solar system.