threejs修改场景天空盒背景图

先来看下效果图~

原理

原理其实很简单，我就是设置了scene的background。一句话解释完了。下面看下代码：

let cubeTextureLoader = new THREE.CubeTextureLoader();
cubeTextureLoader.setPath( '/skybox/' );

let cubeTexture = cubeTextureLoader.load( [
    "px.png", "nx.png",
    "py.png", "ny.png",
    "pz.png", "nz.png"
]);
//需要把色彩空间编码改一下，原因我上一篇说过的
cubeTexture.encoding = THREE.sRGBEncoding

scene.background = cubeTexture;

切换背景注意事项

切换背景其实很容易，两个步骤：

1. 将原本的背景注销掉，主要是避免内存泄漏

scene.background.dispose()

2. 将新背景替换上去

let cubeTextureLoader = new THREE.CubeTextureLoader();
cubeTextureLoader.setPath( '/skybox/' );

let cubeTexture = cubeTextureLoader.load( [
    "newpx.png", "newnx.png",
    "newpy.png", "newny.png",
    "newpz.png", "newnz.png"
]);
//需要把色彩空间编码改一下，原因我上一篇说过的
cubeTexture.encoding = THREE.sRGBEncoding

scene.background = cubeTexture;

我没有把完整代码贴上来，把原理解释清楚就ok