天空盒 · Sky Box · ▶ 在线运行案例

天空盒

你将学到什么

  • scene.skyBox 替换默认渐变天空
  • 立方体贴图 六面命名（positiveX / negativeX …）
  • UrlTemplateImageryProvider 加载 XYZ 瓦片底图

效果说明

使用高德卫星影像作底图，天空换成自定义六面 PNG，形成「地面实景 + 定制天空」的视觉效果。

核心概念

SkyBox

viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
        positiveX: 'px.png',  // 右 (+X)
        negativeX: 'nx.png',  // 左 (-X)
        positiveY: 'py.png',  // 前 (+Y) — 注意与 Three.js 轴向可能不同
        negativeY: 'ny.png',  // 后 (-Y)
        positiveZ: 'pz.png',  // 上 (+Z)
        negativeZ: 'nz.png',  // 下 (-Z)
    }
});

本案例注释说明了 贴图轴与 Cesium 期望面的映射关系（px/nx/py 等需按实际摄影机朝向调整）。

关闭默认底图

const viewer = new Cesium.Viewer(box, { baseLayer: false });
viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: 'https://.../{z}/{x}/{y}',
        maximumLevel: 18,
    })
);

实现步骤

  1. Viewer 设 baseLayer: false，手动 add 影像
  2. 准备 6 张无缝立方体贴图
  3. new Cesium.SkyBox({ sources }) 赋给 scene.skyBox
  4. 若天空方向不对，交换 positiveY/negativeY 等面

代码要点

import * as Cesium from 'cesium'

const box = document.getElementById('box')

const viewer = new Cesium.Viewer(box, {

    animation: false,//是否创建动画小器件，左下角仪表    

    baseLayerPicker: false,//是否显示图层选择器，右上角图层选择按钮

    baseLayer: false, // 不显示默认图层

    fullscreenButton: false,//是否显示全屏按钮，右下角全屏选择按钮

    timeline: false,//是否显示时间轴    

    infoBox: false,//是否显示信息框   

})
 
viewer.imageryLayers.addImageryProvider(

    new Cesium.UrlTemplateImageryProvider({

        //高德卫星影像
        url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',

        maximumLevel: 18

    })

)

// px => -90, nx => 90, py => 0, ny => 180, pz => 0, nz => 180
viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
        positiveX: FILE_HOST + 'files/cesiumSky/px.png', // 右面
        negativeX: FILE_HOST + 'files/cesiumSky/nx.png', // 左面
        positiveY: FILE_HOST + 'files/cesiumSky/pz.png', // 将前面用作上面
        negativeY: FILE_HOST + 'files/cesiumSky/nz.png', // 将后面用作下面
        positiveZ: FILE_HOST + 'files/cesiumSky/py.png', // 将上面用作前面
        negativeZ: FILE_HOST + 'files/cesiumSky/ny.png'  // 将下面用作后面
    }
});

完整源码：GitHub

小结