cesium星空天空盒效果（附原图）

效果：

代码：

<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: "效果1",
      title: "",
      callback: () => changeView1(),
    },
    {
      name: "效果2",
      title: "",
      callback: () => changeView2(),
    },
    {
      name: "效果3",
      title: "",
      callback: () => changeView3(),
    },
    {
      name: "效果4",
      title: "",
      callback: () => changeView4(),
    },
    {
      name: "效果5",
      title: "",
      callback: () => changeView5(),
    },
    {
      name: "效果6",
      title: "",
      callback: () => changeView6(),
    },
  ],
});

onMounted(() => {
  viewer.terrainProvider = Cesium.createWorldTerrain(); //开启地形
  window.swpecesium.cesiumViewer.setMapCenter({
    lat: 31.035943,
    lon: 103.650219,
    alt: 609,
    heading: 40,
    pitch: 10,
  });
});
function changeView1() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/1/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/1/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/1/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/1/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/1/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/1/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView2() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/2/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/2/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/2/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/2/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/2/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/2/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView3() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/3/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/3/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/3/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/3/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/3/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/3/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView4() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/4/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/4/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/4/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/4/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/4/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/4/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView5() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/5/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/5/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/5/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/5/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/5/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/5/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView6() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/6/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/6/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/6/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/6/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/6/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/6/tycho2t3_80_pz.jpg",
    },
  });
}
</script>
<style scoped lang='less'>
.btn {
  position: absolute;
  left: 300px;
  top: 30px;
  z-index: 999;
}
:deep(.el-form-item__label) {
  color: #fff;
}
</style>

原图链接https://pan.baidu.com/s/1ykeY8qi6L-jnHOUW6a9lDg?提取码1234