加载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>