cesium设置近地天空盒多种效果（附天空盒原图）-拓冰建站

效果（天空盒原图已放云盘在文章最后）：

为了效果逼真设置了当达到一定高度时就恢复系统默认星空天空盒所，以设置了两个变量一个是近地的天空盒子一个是当超过一定高度时用系统默认的

let currSkyBox; // 当前生效的Skybox
let defaultSkybox; // cesium自带的Skybox
// 晴天
const qingtianSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/qingtian/rightav9.jpg",negativeX: "../../imgs/天空盒2/qingtian/leftav9.jpg",positiveY: "../../imgs/天空盒2/qingtian/frontav9.jpg",negativeY: "../../imgs/天空盒2/qingtian/backav9.jpg",positiveZ: "../../imgs/天空盒2/qingtian/topav9.jpg",negativeZ: "../../imgs/天空盒2/qingtian/bottomav9.jpg",},
});
// 晚霞
const wanxiaSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/wanxia/SunSetRight.png",negativeX: "../../imgs/天空盒2/wanxia/SunSetLeft.png",positiveY: "../../imgs/天空盒2/wanxia/SunSetFront.png",negativeY: "../../imgs/天空盒2/wanxia/SunSetBack.png",positiveZ: "../../imgs/天空盒2/wanxia/SunSetUp.png",negativeZ: "../../imgs/天空盒2/wanxia/SunSetDown.png",},
});
// 蓝天
const lantianSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/lantian/Right.jpg",negativeX: "../../imgs/天空盒2/lantian/Left.jpg",positiveY: "../../imgs/天空盒2/lantian/Front.jpg",negativeY: "../../imgs/天空盒2/lantian/Back.jpg",positiveZ: "../../imgs/天空盒2/lantian/Up.jpg",negativeZ: "../../imgs/天空盒2/lantian/Down.jpg",},
});

监听场景高度变化

onMounted(() => {viewer.terrainProvider = Cesium.createWorldTerrain(); //开启地形window.swpecesium.cesiumViewer.setMapCenter({lat: 31.035943,lon: 103.650219,alt: 609,heading: 40,pitch: 10,});defaultSkybox = viewer.scene.skyBox; //先把系统默认的天空盒保存下来currSkyBox = qingtianSkybox; //默认近地时使用个晴天天空盒viewer.scene.preUpdate.addEventListener(() => {//获取相机高度let position = viewer.scene.camera.position;let cameraHeight = Cesium.Cartographic.fromCartesian(position).height;if (cameraHeight < 240000) {viewer.scene.skyBox = currSkyBox;viewer.scene.skyAtmosphere.show = false; //关闭地球大气层} else {viewer.scene.skyBox = defaultSkybox; //使用系统默认星空天空盒viewer.scene.skyAtmosphere.show = true; //显示大气层}});
});

界面中4个按钮切换不同场景简单的赋值操作

function changeView1() {currSkyBox = qingtianSkybox;
}
function changeView2() {currSkyBox = wanxiaSkybox;
}
function changeView3() {currSkyBox = lantianSkybox;
}
function changeView4() {currSkyBox = defaultSkybox;
}

完整代码：


<template><div class="btn"><el-form :model="person.data" label-width="140px"><el-form-item label="效果："><div v-for="(item, index) in person.cameraData" :key="index"><el-button @click="item.callback">{{ item.name }}</el-button></div></el-form-item></el-form></div><Map />
</template><script setup>
import Map from "@/components/map/Map.vue";
import { nextTick, onMounted, reactive } from "vue";
import "./skybox_nearground.js";
const person = reactive({cameraData: [{name: "晴天",title: "",callback: () => changeView1(),},{name: "晚霞",title: "",callback: () => changeView2(),},{name: "蓝天",title: "",callback: () => changeView3(),},{name: "默认",title: "",callback: () => changeView4(),},],
});let currSkyBox; // 当前生效的Skybox
let defaultSkybox; // cesium自带的Skybox
// 晴天
const qingtianSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/qingtian/rightav9.jpg",negativeX: "../../imgs/天空盒2/qingtian/leftav9.jpg",positiveY: "../../imgs/天空盒2/qingtian/frontav9.jpg",negativeY: "../../imgs/天空盒2/qingtian/backav9.jpg",positiveZ: "../../imgs/天空盒2/qingtian/topav9.jpg",negativeZ: "../../imgs/天空盒2/qingtian/bottomav9.jpg",},
});
// 晚霞
const wanxiaSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/wanxia/SunSetRight.png",negativeX: "../../imgs/天空盒2/wanxia/SunSetLeft.png",positiveY: "../../imgs/天空盒2/wanxia/SunSetFront.png",negativeY: "../../imgs/天空盒2/wanxia/SunSetBack.png",positiveZ: "../../imgs/天空盒2/wanxia/SunSetUp.png",negativeZ: "../../imgs/天空盒2/wanxia/SunSetDown.png",},
});
// 蓝天
const lantianSkybox = new Cesium.SkyBox({sources: {positiveX: "../../imgs/天空盒2/lantian/Right.jpg",negativeX: "../../imgs/天空盒2/lantian/Left.jpg",positiveY: "../../imgs/天空盒2/lantian/Front.jpg",negativeY: "../../imgs/天空盒2/lantian/Back.jpg",positiveZ: "../../imgs/天空盒2/lantian/Up.jpg",negativeZ: "../../imgs/天空盒2/lantian/Down.jpg",},
});
onMounted(() => {viewer.terrainProvider = Cesium.createWorldTerrain(); //开启地形window.swpecesium.cesiumViewer.setMapCenter({lat: 31.035943,lon: 103.650219,alt: 609,heading: 40,pitch: 10,});defaultSkybox = viewer.scene.skyBox; //先把系统默认的天空盒保存下来currSkyBox = qingtianSkybox;viewer.scene.preUpdate.addEventListener(() => {let position = viewer.scene.camera.position;let cameraHeight = Cesium.Cartographic.fromCartesian(position).height;if (cameraHeight < 240000) {viewer.scene.skyBox = currSkyBox;viewer.scene.skyAtmosphere.show = false; //关闭地球大气层} else {viewer.scene.skyBox = defaultSkybox; //使用系统默认星空天空盒viewer.scene.skyAtmosphere.show = true; //显示大气层}});
});
function changeView1() {currSkyBox = qingtianSkybox;
}
function changeView2() {currSkyBox = wanxiaSkybox;
}
function changeView3() {currSkyBox = lantianSkybox;
}
function changeView4() {currSkyBox = defaultSkybox;
}
</script>
<style scoped lang='less'>
.btn {position: absolute;left: 300px;top: 30px;z-index: 999;
}
:deep(.el-form-item__label) {color: #fff;
}
</style>

此处有个坑！！天空会倾斜，下篇文章讲解：https://blog.csdn.net/m0_63701303/article/details/135619546

天空盒原图地址链接：https://pan.baidu.com/s/1xnQrcf1bFxcLDz2htxtHDA
提取码：1234