加载内联 glTF 模型
模型数据在运行时用脚本拼出来,转成 GLB 二进制后交给
Model.fromGltfAsync。缩放滑杆与颜色混合模式都是运行时可改的。
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 轴朝上,导出环节没换算的话,加载出来会放大上千倍或整个躺倒。