Cesium 天空盒教程

最新推荐文章于 2026-06-24 09:14:59 发布

原创最新推荐文章于 2026-06-24 09:14:59 发布 · 141 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

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

案例合集： 三维可视化功能案例（threehub.cn）
开源仓库github地址： https://github.com/z2586300277/three-cesium-examples
400个案例代码: 网盘链接

你将学到什么

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,
    })
);

实现步骤

Viewer 设 baseLayer: false，手动 add 影像
准备 6 张无缝立方体贴图
new Cesium.SkyBox({ sources }) 赋给 scene.skyBox
若天空方向不对，交换 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'  // 将下面用作后面
    }
});