VUE3-Cesium（设置天空盒、viewer设置）

目录

1.设置背景天空盒

2.viewer设置

1.设置背景天空盒

通过skyBox: new Cesium.SkyBox进行设置

skyBox: new Cesium.SkyBox({       sources: {         positiveX: "xxx.jpg",         negativeX: "xxx.jpg",         positiveY: "xxx.jpg",         negativeY: "xxx.jpg",         positiveZ: "xxx.jpg",         negativeZ: "xxx.jpg",       },     }),

 Cesium中背景天空盒所使用为立方体全景图片，

全景图可在此网站下载：Poly Haven

利用下载的全景图进行切片，可以使用该网站进行立方体切片：HDRI to CubeMap (matheowis.github.io)

案例代码如下： 

  




import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";

// 设置cesium的token
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk";
// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
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,
    // 是否创建动画
    animation: false,
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
    // 是否显示右上角的查询按钮
    geocoder: false,
    // 是否显示HOME按钮
    homeButton: false,
    // 是否显示场景控制按钮
    sceneModePicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否显示时间轴
    timeline: 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",
      },
    }),
  });

  // 设置沙箱允许使用JS
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");

  // // 隐藏cesiumLogo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });
});



* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}

实现效果如图所示：

 天空盒图片链接：

链接：https://pan.baidu.com/s/1YcGAO2Z2D1egHGnlhNcUnA  提取码：ns51 

2.viewer设置

在new Cesium.Viewer("cesiumContainer", {}）中对viewer属性进行设置，如下：

var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    // infoBox: false,
    // 是否创建动画
    // animation: false,
    // // 是否显示图层选择器
    // baseLayerPicker: false,
    // // 是否显示全屏按钮
    // fullscreenButton: false,
    // // 是否显示右上角的查询按钮
    // geocoder: false,
    // // 是否显示HOME按钮
    // homeButton: false,
    // // 是否显示场景控制按钮
    // sceneModePicker: false,
    // // 是否显示帮助按钮
    // navigationHelpButton: false,
    // // 是否显示时间轴
    // timeline: false,
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      // 添加水面的效果
      requestWaterMask: true,
      // 添加地形光照的效果，添加法线
      requestVertexNormals: true,
    }),
  });

实现效果：