cesium实现自定义的天空盒效果

最新推荐文章于 2024-11-25 10:28:27 发布

右弦GISer

最新推荐文章于 2024-11-25 10:28:27 发布

阅读量8.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签： gis cesium

本文链接：https://blog.youkuaiyun.com/weixin_45782925/article/details/124573001

cesium 专栏收录该内容

122 篇文章

订阅专栏

文章目录

Cesium实战系列文章总目录：传送门

1. 实现效果

在这里插入图片描述

2. 实现方法

2.1 实现思路

（1）设计天空盒
cesium提供了SkyBox类，用于设计天空盒，API：传送门
在这里插入图片描述

天空盒需要包含6张图片，展开对应图：
在这里插入图片描述
参数与方位的对应关系如下表所示：

序号	参数	含义
1	negativeX	left
2	positiveX	right
3	negativeY	front
4	positiveY	back
5	negativeZ	down
6	positiveZ	up

具体示意如下图，其中红点为当前所在位置，Y轴垂直于屏幕。
在这里插入图片描述
（2）判断相机高度
通过判断相机高度，当高度小于阈值时，关闭大气层，显示自定义的近地天空盒。

使用camera类的position属性进行获取，API：添加链接描述
在这里插入图片描述
然后再转换为实际的大地高，进行判断即可。

2.2 具体代码

具体实现代码如下：

 // 自定义的近地天空盒
 let groundSkybox = new Cesium.SkyBox({
     sources: {
         negativeX: './images/skybox/left.jpg',
         positiveX: './images/skybox/right.jpg',
         negativeY: './images/skybox/front.jpg',
         positiveY: './images/skybox/back.jpg',
         negativeZ: './images/skybox/down.jpg',
         positiveZ: './images/skybox/up.jpg'
     }
 })

 // 自带的默认天空盒
 let 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;
     }
 })