Skip to content

加载 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

如果你的模型出现了“浮空”或“埋入地下”的情况,请参考 模型定位与贴地 章节。

Released under the MIT License.