Cesium快速入门4：天空盒

现在，我们先来看看地球场景里的"背景"------也就是天空盒。

有时候，默认的宇宙星空看着太黑、太科幻，我想换个更通透、更"天空"的感觉，比如蓝天白云、晨曦晚霞，行不行？

当然可以！这种背景就叫"天空盒"（SkyBox），换成银河、宇宙、晴空、晚霞，随你喜欢。

我给大家准备了一个现成的天空盒，也顺便把整套流程捋一遍，照着做就能换。

1. 去哪找素材

   推荐 Poly Haven（原名 HDRI Haven），全是免费高清 HDR / EXR 环境贴图。

   网址：https://polyhaven.com/hdris

   进去后搜"sky""sunset""cloud"等关键词，看到中意的就下载。

2. 格式转换

   下载下来的文件通常是 HDR 或 EXR，但 Cesium 要的是 6 张方形 PNG（立方体展开图）。

   在线一键转换工具：https://matheowis.github.io/HDRI-to-CubeMap/

   上传 → 选"CubeMap" → 自动生成 px、nx、py、ny、pz、nz 六张图 → 打包下载。

3. 文件摆放

   把 6 张图丢到项目里，我习惯放在

   yourProject/textures/skybox/

   目录下，分别命名：

   px.png（右） nx.png（左）

   py.png（前） ny.png（后）

   pz.png（上） nz.png（下）

这里需要把py与ny换下名字，因为cesium用的是+Y坐标系。

1. 代码里启用

   在初始化 Cesium.Viewer 时，把默认天空盒替换成自己的即可。

   下方代码直接把 skyBox 属性挂进去，六张图按顺序填进去，一行都不用改。

   注意路径要写对，区分大小写。

   // 创建 Viewer 时自定义天空盒
   const viewer = new Cesium.Viewer('cesiumContainer', {

   // 关闭默认星空背景，防止冲突
   skyBox: new Cesium.SkyBox({
   sources: {
   positiveX: './textures/skybox/px.png', // 右
   negativeX: './textures/skybox/nx.png', // 左
   positiveY: './textures/skybox/py.png', // 前
   negativeY: './textures/skybox/ny.png', // 后
   positiveZ: './textures/skybox/pz.png', // 上
   negativeZ: './textures/skybox/nz.png', // 下
   },
   }),

   // 其他参数想关就关，例如
   baseLayerPicker: false,
   geocoder: false,
   // ......
   });

2. 运行看效果

   刷新页面，背景就变成你自己的天空盒了。

   想再换？只要六张新图覆盖旧图，或者改路径，保存即生效，无需重启服务。

3. 小贴士

   • 图片尺寸用 1024×1024 或 2048×2048 就够，太大加载慢。

   • 如果想让地面也反射天空，可再配合 HDR 做 IBL，但这期先不展开。

   • 六张图边缘颜色要对齐，否则拼缝会穿帮；转换工具默认会做拉伸，一般没问题。

照着上面 6 步来，几分钟就能把"宇宙黑"换成"天空蓝"。

祝大家都能搭出自己看着舒服的小地球！