天空盒

天空盒是指用巨大的盒子将场景包含在其中，然后利用渲染技术把这个巨大的包围体当作场景的外部环境，以增加场景的气氛和用户的代入感。

在 Cesium 场景中，天空盒不需要手动创建，场景初始化成功后，可以通过 scene.skyBox 属性获取天空盒对象，该属性类型为 SkyBox ，该类就两个属性

• show：控制天空盒是否显示

• sources：指定天空盒的源路径

天空盒原理

天空盒内部是通过 WebGL 的 CubeMap 即立方体贴图实现的，立方体贴图是一种纹理类型，它包含了 6 个 2D 纹理，每个 2D 纹理作为立方体六个面中的一张贴图，感兴趣可以搜索 WebGL CubeMap 获取更多相关信息。

在 Cesium 的静态资源里能看到 6 张天空盒贴图，我们替换下这几张图片就会看到天空盒的实际运作方式。

我们通过 SkyBox 的 sources 赋值 6 张贴图就可以修改天空盒

let skyBox = new Cesium.SkyBox({
  sources: {
    positiveX: "/right.jpg",
    negativeX: "/left.jpg",
    positiveY: "/back.jpg",
    negativeY: "/front.jpg",
    positiveZ: "/up.jpg",
    negativeZ: "/down.jpg",
  },
});

// 方法一
let viewer = new Cesium.Viewer("cesiumContainer", {
  skyBox: skyBox,
});

// 方法二
viewer.scene.skyBox = skyBox;

近地/远景天空盒切换

其实全景天空盒的星河图我们不太需要修改，因为项目中的一般视角也不太会看到，但在离地面较近的时候我们需要另外一套天空盒，具体做法就是先创建两个天空盒对象，然后监听视点的高度，当高度达到某个值时进行天空盒的切换。

let skyBox_0 = new Cesium.SkyBox({
  sources: {
    positiveX: "/assets/skyBox/04/px.jpg",
    negativeX: "/assets/skyBox/04/nx.jpg",
    positiveY: "/assets/skyBox/04/py.jpg",
    negativeY: "/assets/skyBox/04/ny.jpg",
    positiveZ: "/assets/skyBox/04/pz.jpg",
    negativeZ: "/assets/skyBox/04/nz.jpg",
  },
});
let skyBox_1 = new MySkyBox({
  sources: {
    positiveX: "/assets/skyBox/03/px.jpg",
    negativeX: "/assets/skyBox/03/nx.jpg",
    positiveY: "/assets/skyBox/03/py.jpg",
    negativeY: "/assets/skyBox/03/ny.jpg",
    positiveZ: "/assets/skyBox/03/pz.jpg",
    negativeZ: "/assets/skyBox/03/nz.jpg",
  },
});
viewer.scene.skyBox = skyBox_0;
// 渲染前监听并判断相机位置
viewer.scene.preUpdate.addEventListener(() => {
  let cameraHeight = viewer.scene.camera.positionCartographic.height;
  if (cameraHeight < 240000) {
    viewer.scene.skyBox = skyBox_1;
    viewer.scene.skyAtmosphere.show = false;
  } else {
    viewer.scene.skyBox = skyBox_0;
    viewer.scene.skyAtmosphere.show = true;
  }
});