cesium星空天空盒效果(附原图)

效果:

代码:

javascript 复制代码
<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

相关推荐
开开心心就好17 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead10 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构