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

加载一个 3D 模型

把一个长方体模型放到北京上空的地表上,并让它绕竖轴缓慢自转。 模型文件由 JavaScript 现场生成,不下载任何外部资源。

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

这个示例在做什么

先用 Float32Array 写出一组长方体的顶点、法线和索引,拼成 glTF 2.0 的 JSON, 再按二进制规范加上 12 字节文件头与两个数据块,得到一个完整的 GLB。 这个 GLB 被包成 Blob,交给 URL.createObjectURL 换成一个临时的 blob: 地址,Cesium 就能像加载普通模型一样加载它。

Model.fromGltfAsync 返回 Promise,加载完成后把模型加入 scene.primitives。模型的摆放通过 modelMatrix 控制: 先用 Transforms.eastNorthUpToFixedFrame 得到该点的「东-北-天」局部坐标系, 再左乘一个绕 Z 轴的旋转矩阵,每一帧重算一次,模型就转起来了。

关键接口

接口作用
Model.fromGltfAsync(options)异步加载 glTF / GLB,返回 Promise,避免回调式写法
Transforms.eastNorthUpToFixedFrame(origin)把「东-北-天」局部坐标换算成地心坐标系的变换矩阵
model.modelMatrix模型整体变换,可随时改,改完下一帧生效
scene.postRender每帧渲染后的回调,用来驱动连续动画

可以直接改的地方

位置改什么效果
boxGlb(18, 46, 14, …)改宽、高、深模型尺寸直接变化,单位是米
[0.55, 0.62, 0.72]换成任意 0–1 的 RGB模型颜色
performance.now() * 0.00025改小或改大系数自转速度,甚至改成负值反向转
fromDegrees(116.391, 39.907, 0)换经纬度和高度模型落地位置

替代说明:官方示例从 ion 读取模型资产。这里用代码生成的 GLB 复现同样的加载过程, 省掉了 Token 与网络请求,Model.fromGltfAsync 的用法完全一致。

模型加载失败时通常只有两种原因:GLB 字节长度没做 4 字节补齐,或者 accessors 里 POSITION 缺少 min / max。