【WebGIS】Cesium：GLTF数据加载
在3D Web GIS开发中，使用GLTF格式的模型可以提高应用的加载速度并提升用户体验。Cesium.js是一个强大的3D地理空间引擎，支持GLTF格式的3D模型，并且提供丰富的API来处理和优化模型的加载和渲染。本文将系统地介绍如何加载GLTF模型，包括从网上下载GLTF模型、将其他3D格式转化为GLTF、以及使用Cesium的API进行优化和交互开发。
GLTF格式简介
GLTF（GL Transmission Format）是一种3D模型的文件格式，专为网络传输和渲染优化。它的优势包括：
- 轻量级：相比其他格式，GLTF更为轻便，适合网络加载。
- 便于解析：GLTF使用JSON描述模型数据，易于解析和渲染。
- 支持PBR（Physically-Based Rendering）：GLTF支持物理材质渲染效果，适用于真实感渲染。
GLTF有两种主要形式：
- .gltf: JSON格式的文件，资源（如纹理、几何体）以外部形式引用。
- .glb: 将所有数据打包在一起的二进制文件，更便于网络传输。
从网上获取GLTF模型
免费GLTF模型资源库
- Sketchfab（https://sketchfab.com）: 提供大量的3D模型，包括GLTF格式。
- Poly Haven（https://polyhaven.com）: 一个高质量的免费3D模型库。
- Google Poly: 虽然Google Poly已经关闭，但你仍然可以在第三方网站找到备份的模型数据。
下载和使用GLTF模型
在上述平台上，选择你想要的模型，下载GLTF或GLB文件。如果模型不是GLTF格式，则需要通过工具进行格式转换（见下文）。
Cesium中加载GLTF模型
在Cesium中加载GLTF非常简单，Cesium提供了 Cesium.Model.fromGltf 方法，可以加载GLTF文件并将其添加到场景中。以下是一个加载GLTF模型的完整示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium 加载 GLTF 模型</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/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 id="cesiumContainer"></div>
<script>
// 设置 Cesium Ion 的 Access Token
Cesium.Ion.defaultAccessToken = 'your_access_token_here';
// 创建 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(), // 加载地形数据
imageryProvider: Cesium.createOpenStreetMapImageryProvider(), // 设置地图图层
scene3DOnly: true, // 仅加载3D场景，优化性能
shadows: true, // 开启阴影效果
});
// 加载GLTF模型
const modelPosition = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0); // 模型位置（经度，纬度，海拔）
const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url: 'https://example.com/model.gltf', // GLTF文件的URL
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(modelPosition), // 将模型放置于特定位置
scale: 10.0, // 调整模型的大小
maximumScale: 20.0, // 最大缩放比例
minimumPixelSize: 50 // 模型最小像素大小
}));
// 设置相机飞行到模型位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 500) // 设置相机的飞行高度
});
// 监听模型加载完成事件
model.readyPromise.then(function (model) {
console.log('GLTF 模型已成功加载！');
}).catch(function (error) {
console.error('GLTF 模型加载失败：', error);
});
</script>
</body>
</html>
Cesium.Model.fromGltf: 用于加载GLTF模型，url指定GLTF文件的路径，modelMatrix确定模型在地球上的位置。Cesium.Cartesian3.fromDegrees: 将地理坐标转换为笛卡尔坐标。flyTo: 将相机飞行到模型位置，提供直观的展示效果。readyPromise: 用于处理模型加载完成后的事件。
其他格式转化为GLTF
使用Blender转换模型
Blender是一款免费、开源的3D建模工具，可以用于将其他格式的模型（如FBX、OBJ等）转换为GLTF。以下是Blender中进行转换的步骤：
- 导入文件：打开Blender，选择
File > Import，选择所需的格式（如OBJ或FBX），然后导入你的模型。 - 调整模型：确保模型的纹理、材质等信息正确加载。
- 导出GLTF：选择
File > Export > GLTF 2.0，你可以选择导出为.gltf（分离的JSON和二进制资源）或.glb（单个二进制文件）。
Blender提供了细粒度的导出设置，如导出动画、纹理等，确保你的模型与Cesium兼容。
在线工具
有些在线工具也可以将常见的3D格式转换为GLTF：
- Cesium 3D Tiling Pipeline: https://cesium.com/learn/3d-tiling/3d-tiling-pipeline/
- Online Convert: https://www.online-convert.com/ 可以将OBJ、FBX等格式文件在线转换为GLTF。
优化GLTF模型的加载和渲染
在使用Cesium加载GLTF模型时，性能是一个需要重点考虑的问题，尤其是在加载大规模3D模型时。以下是一些优化技巧：
使用GLB格式
GLB格式是GLTF的二进制版本，它将所有的资源（如几何体、纹理等）打包在一个文件中，可以减少网络请求次数，提升加载速度。
优化模型的几何体
- 在Blender等3D工具中，减少模型的多边形数量，优化顶点和面片的分布。
- 使用 “Decimate Modifier” 来降低模型复杂度，同时保持外观质量。
使用Cesium的LOD（Level of Detail）机制
Cesium支持通过多级细节（LOD）来优化大模型的加载和渲染。可以根据相机与模型的距离，动态加载不同分辨率的模型。
model.maximumScale = 20; // 当相机距离很近时，使用最高分辨率
model.minimumPixelSize = 50; // 当相机距离较远时，模型缩小为最小像素大小
为GLTF模型添加交互事件
在Cesium中，可以为GLTF模型添加各种交互事件，如点击、悬停等。下面的示例展示了如何检测用户点击GLTF模型的事件：
// 创建点击事件
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.position); // 检测点击的对象
if (Cesium.defined(pickedObject)) {
const model = pickedObject.primitive;
alert('你点击了模型！');
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
scene.pick:
通过用户点击位置，检测场景中哪个对象被选中。
primitive: 返回被点击的模型对象，你可以进一步操作该模型。
GLTF模型的动画与多级细节（LOD）
动画效果
GLTF支持骨骼动画和关键帧动画。通过 activeAnimations API，可以播放GLTF模型的动画。
model.readyPromise.then(function (model) {
// 添加所有动画
model.activeAnimations.addAll();
console.log('动画开始播放');
});
使用LOD提升性能
对于大型模型或复杂的场景，使用LOD机制可以提高Cesium的渲染性能。当相机离模型较远时，Cesium会渲染较低分辨率的模型。
总结
通过以上的介绍，你应该已经掌握了如何在Cesium中加载GLTF模型、从其他格式转换为GLTF、优化加载和渲染性能，以及为模型添加交互事件。GLTF作为轻量级的3D模型格式，非常适合在Web GIS应用中使用。配合Cesium的API，可以轻松实现3D模型的高效渲染和互动展示。