Three.js - Skybox

Three.js - Skybox

reference documents

Threejs Scene

solid color background

To put it simply, the entire background is a solid color, which is rarely used in actual development, because it is not very good-looking after all.

scene.background = new THREE.Color(1, 0.5 ,1);

The effect is as follows:

background image

Use a picture as the scene background, no matter how the scene is rotated, the background will never change, and the performance effect is average.

scene.background = new THREE.TextureLoader().load("/test/1.png");

The effect is as follows:

skybox

The sky box here is realized by using THREE.CubeTextureLoader to load the texture material and set it as the background of the scene.

scene.background = new THREE.CubeTextureLoader().load([
            "/test/Left.png",
            "/test/Right.png",
            "/test/Up.png",
            "/test/Down.png",
            "/test/Front.png",
            "/test/Back.png",
        ]);

• It should be noted that the 6 textures here are in order, otherwise the connection of the skybox will be disordered.

The effect is as follows:

background blurriness

官方原话：Sets the blurriness of the background. Only influences environment maps assigned to Scene.background. Valid input is a float between 0 and 1. Default is 0.

Background enhancement (backgroundIntensity)

New features after version 147

官方原话：Attenuates the color of the background. Only applies to background textures. Default is 1.

Simply put, black is used to cover the background. When the value is 0, the background is completely black.

Epilogue:

I am a novice in threejs Xiaobai, welcome to criticize and correct me if I write something wrong.