首页 > 建站教程 > 地图,GIS教程 >  Cesium-加载GLB和倾斜摄影模型正文

Cesium-加载GLB和倾斜摄影模型

加载glb模型、加载倾斜摄影模型,并且要求模型贴地

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Cesium</title>

<link href="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />

<style>

html,

  body,

  #cesiumContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}

</style>

</head>

<body>

<!-- 创建一个 div 作为 Cesium 视图的容器 -->

<div id="cesiumContainer"></div>

<!-- 引入 Cesium 的 JavaScript 文件 -->

<script src="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Cesium.js"></script>

<script>

  // 初始化 Cesium 视图

  Cesium.Ion.defaultAccessToken =

    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZDVlMTQ5ZC1kZTYxLTQzM2MtODU3ZS1kMjA4YzZiOTBjZGEiLCJpZCI6Mjc5NTY3LCJpYXQiOjE3NDA2NDMyODJ9.ScSAm-1y-8DT0uq4DXGt8NQrEPVo3b_f-P_5bghF7rU";

  const viewer = new Cesium.Viewer("cesiumContainer", {

    terrainProvider: Cesium.createWorldTerrain(),

    geocoder: false, //是否显示位置查找工具

    homeButton: false, //是否显示首页位置工具

    sceneModePicker: false, //是否显示视角模式切换工具

    baseLayerPicker: false, //是否显示默认图层选择工具

    navigationHelpButton: false, //是否显示导航帮助工具

    animation: false, //是否显示动画工具

    timeline: false, //是否显示时间轴工具

    fullscreenButton: false, //是否显示全屏按钮工具

    infoBox: false,

    creditContainer: document.createElement("div"), //移除左下角的版权信息

  });

  const glbPath = "./Cesium_Air.glb";

  const tazhongPath = "./tazhong/tileset.json";

  

  // 定义模型的位置

  const position = Cesium.Cartesian3.fromDegrees(

    116.3912757,

    39.906217,

    100

  );

  // 创建一个 Entity 对象来加载 GLB 模型

  const modelEntity = viewer.entities.add({

    name: "Cesium Air GLB Model",

    position: position,

    model: {

      uri: glbPath,

      scale: 20000, // 调整模型的缩放比例

    },

  });

  // viewer.camera.flyTo({

  //   destination: Cesium.Cartesian3.fromDegrees(

  //     116.3912757,

  //     39.906217,

  //     30000000

  //   ),

  //   orientation: {

  //     heading: Cesium.Math.toRadians(0),

  //     pitch: Cesium.Math.toRadians(-90),

  //   },

  // })

  // 加载倾斜摄影模型

  const tileset = new Cesium.Cesium3DTileset({

    url: tazhongPath,

  });

  // 设置倾斜摄影模型的高度参考为贴地

  tileset.style = new Cesium.Cesium3DTileStyle({

    color: "color('white')",

    show: true,

    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

  });

  // 将倾斜摄影模型添加到场景中

  viewer.scene.primitives.add(tileset);

  viewer.zoomTo(tileset);

</script>

</body>

</html>