加载 3D Tiles (大规模场景)
3D Tiles 是 Cesium 团队推出的 OGC 标准,专门用于流式传输大规模、异构的三维地理空间数据集。无论是倾斜摄影、城市建筑模型、BIM 还是点云,3D Tiles 都能提供极致的加载性能和渲染效率。
🚀 快速上手
你可以直接在 Cesium Sandcastle 中粘贴以下代码进行测试。
核心代码
javascript
import * as Cesium from "cesium";
// 1. 初始化 Viewer
const viewer = new Cesium.Viewer("cesiumContainer", {
terrain: Cesium.Terrain.fromWorldTerrain(),
timeline: false,
animation: false,
baseLayerPicker: false,
sceneModePicker: false,
});
// 2. 设置初始视图(可选)
const center = Cesium.Cartesian3.fromDegrees(
-122.13810992689156,
47.644519699638366,
120,
);
const boundingSphere = new Cesium.BoundingSphere(center, 50.0);
const offset = new Cesium.HeadingPitchRange(
Cesium.Math.toRadians(100.0),
Cesium.Math.toRadians(-25.0),
500.0,
);
viewer.camera.viewBoundingSphere(boundingSphere, offset);
// 3. 异步加载 3D Tileset
try {
// 替换为你的 tileset.json 地址
const url = "https://minio.i-tudou.com/yintu-reality-pipeline/20260707_ningbo/out_tiles_jiaxing/tileset.json";
const tileset = await Cesium.Cesium3DTileset.fromUrl(url);
// 将模型添加到场景中
viewer.scene.primitives.add(tileset);
// 视角跳转到模型
await viewer.zoomTo(tileset);
console.log("3D Tiles 加载成功!");
} catch (error) {
console.error(`加载 3D Tiles 失败: ${error}`);
}
// 4. 添加交互(Sandcastle 示例)
if (typeof Sandcastle !== "undefined") {
Sandcastle.addToolbarButton("Next view →", function () {
offset.heading -= 100;
offset.pitch = Cesium.Math.toRadians(-25.0);
offset.range -= 100;
if (offset.range <= 0) {
offset.range = 500;
}
viewer.camera.flyToBoundingSphere(boundingSphere, { offset });
});
}💡 关键概念说明
1. Cesium3DTileset.fromUrl
这是 CesiumJS 1.107+ 推荐的异步加载方式。它会返回一个 Promise,解析后得到 Cesium3DTileset 实例。
2. viewer.scene.primitives.add
3D Tiles 作为 Primitive 添加到场景中,这与普通的 Entity 不同,它更接近渲染底层,适合处理海量数据。
3. tileset.json
这是 3D Tiles 的入口文件,定义了空间分层结构(Spatially Coherent Hierarchies)和资源索引。
🛠️ 进阶技巧
- 裁剪与显隐控制:可以通过
tileset.show = false快速控制显隐。 - 样式修改:使用
tileset.style = new Cesium.Cesium3DTileStyle({ ... })进行动态样式配置。 - 性能优化:调整
maximumScreenSpaceError参数(默认 16),数值越大加载越快但细节越少。
TIP
如果你的模型出现了“浮空”或“埋入地下”的情况,请参考 模型定位与贴地 章节。
