cesium自定义天空盒

Cesium 自定义天空盒

方式一

替换原SkyBox文件夹 Cesium\Assets\Textures\SkyBox，注意图片方位和对应关系

方式二

简单修改代码：

const groundSkyBox = new Cesium.SkyBox({
  sources: {
    positiveX :  '../data/sky/px.png',
    negativeX :  '../data/sky/nx.png',
    positiveY :  '../data/sky/pz.png',
    negativeY :  '../data/sky/nz.png',
    positiveZ :  '../data/sky/py.png',
    negativeZ :  '../data/sky/ny.png'
  }
})
viewer.scene.skyBox = groundSkyBox

复杂一点的情况，近景和远景加载不同的天空盒：

const defaultSkybox = viewer.scene.skyBox

 // 渲染前监听并判断相机位置
 viewer.scene.preUpdate.addEventListener(() => {
  let position = viewer.scene.camera.position;
  let cameraHeight = Cesium.Cartographic.fromCartesian(position).height;
  if (cameraHeight < 240000) {
      viewer.scene.skyBox = groundSkybox;
      viewer.scene.skyAtmosphere.show = false;
  } else {
      viewer.scene.skyBox = defaultSkybox;
      viewer.scene.skyAtmosphere.show = true;
  }
})

方式三

未测试，加载近景天空盒需修改SkyBox代码，具体可参考：

https://blog.csdn.net/weixin_43972992/article/details/127404495

背景色

关闭天空盒，改背景颜色：

viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = Cesium.Color.GREEN;

其他情况可参考：

https://blog.csdn.net/caozl1132/article/details/96971390

素材处理

天空盒方位如下图：

对应关系：

negz→down
posx→right
negx→left
posy→back
posz→up
negy→front

下载的图片需要进行适当的旋转，旋转关系如下：

rt 左旋转90度
lf 右旋转90度
ft 旋转180度
bk 不用旋转
up 左旋转90度
dn 左旋转90度

参考：https://blog.csdn.net/weixin_40184249/article/details/102808142

资源

全景素材网站：

https://polyhaven.com/

全景转立方图工具：

https://matheowis.github.io/HDRI-to-CubeMap/

https://jaxry.github.io/panorama-to-cubemap/

可用资源:

星空图：https://share.weiyun.com/kyaXdoc7

天空盒素材：https://download.csdn.net/download/qq_39654518/76312336

已验证的资源见cesium-demo下 data 文件夹

参考

https://blog.csdn.net/weixin_45782925/article/details/124573001

https://blog.csdn.net/u011575168/article/details/109889699

https://zhuanlan.zhihu.com/p/450671609

彩蛋：

24573001

https://blog.csdn.net/u011575168/article/details/109889699

https://zhuanlan.zhihu.com/p/450671609

彩蛋：

http://stars.chromeexperiments.com/