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.
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...
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 ...
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...
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...
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...
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.
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 ↩