首页 / Cesium / 使用示例
加载一个 3D 模型
把一个长方体模型放到北京上空的地表上,并让它绕竖轴缓慢自转。 模型文件由 JavaScript 现场生成,不下载任何外部资源。
源码与运行效果
这个示例在做什么
先用 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。