2025-03-03 09:18阅读: 23评论: 0推荐: 0

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

加载glb模型(CesiumAir.glb)
加载倾斜摄影模型(tazhong文件夹)，要求贴地

 <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium</title>
    <!-- 引入 Cesium 的 CSS 文件 -->
    <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>

上一篇Cesium-点击实体显示弹窗

下一篇OpenLayers-加载影像、点、面要素

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18747301

posted @ 2025-03-03 09:18 Khru 阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

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

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Cesium</title>
	<!-- 引入 Cesium 的 CSS 文件 -->
	<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>