cesium.js 入门到精通(3)

天空盒子的设置

目前的地球背景是地图的cesium

我们想换成自己背景

 // 设置天空盒skyBox: new Cesium.SkyBox({sources: {positiveX: "./texture/sky/px.jpg",negativeX: "./texture/sky/nx.jpg",positiveY: "./texture/sky/ny.jpg",negativeY: "./texture/sky/py.jpg",positiveZ: "./texture/sky/pz.jpg",negativeZ: "./texture/sky/nz.jpg",},}),

这个背景在cersium 的术语中叫做天空盒

完整代码

<template><div id="cesiumContainer" ref="cesiumContainer"></div>
</template><script setup>
// yarn add cesium
// 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
import * as Cesium from "cesium";
import "./Widgets/widgets.css";
import { onMounted } from "vue";// 设置cesium token
Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";// 设置cesium静态资源路径
window.CESIUM_BASE_URL = "/";// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(// 西边的经度89.5,// 南边维度20.4,// 东边经度110.4,// 北边维度61.2
);onMounted(() => {var viewer = new Cesium.Viewer("cesiumContainer", {// 是否显示信息窗口infoBox: false,// 是否显示查询按钮geocoder: false,// 不显示home按钮homeButton: false,// 控制查看器的显示模式sceneModePicker: false,// 是否显示图层选择baseLayerPicker: false,// 是否显示帮助按钮navigationHelpButton: false,// 是否播放动画animation: false,// 是否显示时间轴timeline: false,// 是否显示全屏按钮fullscreenButton: false,// 设置天空盒skyBox: new Cesium.SkyBox({sources: {positiveX: "./texture/sky/px.jpg",negativeX: "./texture/sky/nx.jpg",positiveY: "./texture/sky/ny.jpg",negativeY: "./texture/sky/py.jpg",positiveZ: "./texture/sky/pz.jpg",negativeZ: "./texture/sky/nz.jpg",},}),});// 隐藏logoviewer.cesiumWidget.creditContainer.style.display = "none";
});
</script><style>
* {margin: 0;padding: 0;
}
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>