经纬志
首页 / Cesium / 使用示例

加载内联 glTF 模型

模型数据在运行时用脚本拼出来,转成 GLB 二进制后交给 Model.fromGltfAsync。缩放滑杆与颜色混合模式都是运行时可改的。

CesiumJS 1.121 · 更新 2026-10-27
源码与运行效果
运行效果

GLB 的结构

GLB 是 glTF 的二进制封装:12 字节文件头(magic、版本、总长度), 之后是若干个块。第一个块装 JSON 描述,第二个块装顶点数据,两块都按 4 字节对齐。 JSON 块不足时用空格补齐,二进制块用零补齐。

示例里的模型是一个 24 顶点、36 索引的立方体:六个面各自 4 个顶点, 法线按面给定,所以边缘不会出现平滑过渡。顶点坐标的 Y 从 0 到 1, 缩放时底面始终贴在地表,不会陷进地里。

为什么用 Blob URL 而不是 data URI

URL.createObjectURL 生成的是同源的 blob 地址,Cesium 内部的 fetch 可以直接取到内容,不受跨域策略影响。data URI 在部分浏览器里 会被 XHR 拦截,导致模型加载失败但控制台只有一行 warn。 数据完全在内存里时,blob 是更稳的选择。

三种混合模式

模式表现典型用途
HIGHLIGHT在原色上叠加指定颜色,模型整体偏蓝选中状态、告警高亮
MIX按 colorBlendAmount 比例与原色混合按字段分级着色
REPLACE完全替换模型颜色,纹理细节丢失示意体块、白模状态

可调参数

位置改什么效果
缩放滑杆20 到 400 米model.scale 实时生效,不重新加载
minimumPixelSize: 28改成 120远景时模型自动放大,不会缩成一个小点
baseColorFactor换成其他 RGBA改模型材质底色
modelMatrix 的坐标换经纬度模型整体搬到别处

模型发黑。glTF 的 PBR 材质需要光源。示例打开了 globe.enableLighting,并且没有关闭太阳;如果把 scene.sun.show 关掉又没配环境贴图,模型会变成一团黑色。 真实业务里光照、环境贴图、材质金属度三者要一起调。

换成外部模型文件

把 URL.createObjectURL 那一段换成模型地址即可,其余代码不变: Model.fromGltfAsync({ url: '/models/pump.glb', scale: 1 })。 需要注意模型单位与坐标系:多数国内建模成果以毫米或厘米为单位, glTF 约定却是米、Y 轴朝上,导出环节没换算的话,加载出来会放大上千倍或整个躺倒。