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 is part of the Solar System Simulator series:

1. Three.js coordinate basics
2. Three.js PBR (Physical-based rendering) material basics
3. Create realistic Earth
4. Create realistic Sun with glow
5. Create realistic Saturn with rings
6. Create realistic Phobos with irregular shape
7. Make the Sun shine
8. Create Milky Way skybox
9. Compute the elliptical orbit

To create the background, we first load a high-resolution image of the Milky Way using THREE.TextureLoader(). Then, we apply linear filtering to ensure smooth rendering.

const loader = new THREE.TextureLoader();
const texture = loader.load('assets/galaxy_starfield_sharpen.jpg');
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter;

To display the equirectangular texture on a cube, we use Three.js’s built-in shader, ShaderLib.equirect. This shader is designed to make skyboxes or background environments.

const shader = THREE.ShaderLib.equirect;
const material = new THREE.ShaderMaterial({
	fragmentShader: shader.fragmentShader,
	vertexShader: shader.vertexShader,
	uniforms: shader.uniforms,
	depthWrite: false, // Prevents the background from interfering with depth calculations
	side: THREE.BackSide, // Renders the texture on the inside of the geometry
});
material.uniforms.tEquirect.value = texture;

The side: THREE.BackSide rendering ensures that the stars are visible from within the box, surrounding our scene completely. Lastly, we create a large box geometry. Since our shader maps the texture equirectangularly, a cube can effectively display the entire sky without distortion.

const plane = new THREE.BoxGeometry(100, 100, 100); // set the size manually depending on the map scale
const background = new THREE.Mesh(plane, material);
scene.add(background);

After applying this background, our scene now looks like this.

Finally, I conclude the How to Create the Solar System series. Based on the posts so far, you might now have all the necessary knowledge to build a realistic solar system. From now on, I will try to continue to make updates, especially focusing on UI/UX features, such as labelling planet, drawing orbits.