当前位置：首页 > news >正文

【WebGIS】Cesium：GLTF数据加载

news 2026/2/11 5:09:01

在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 TokenCesium.Ion.defaultAccessToken = 'your_access_token_here';// 创建 Cesium Viewerconst 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文件的URLmodelMatrix: 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模型的高效渲染和互动展示。