threejs修改场景天空盒背景图 |
您所在的位置：网站首页 › 天空壁纸背景图 › threejs修改场景天空盒背景图 |
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; 切换背景注意事项切换背景其实很容易，两个步骤： 将原本的背景注销掉，主要是避免内存泄漏 scene.background.dispose() 将新背景替换上去 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 |
【本文地址】
今日新闻 |
推荐新闻 |