Cesium 3D Tiles 加载与优化实战

一、3D Tiles 简介

3D Tiles 是一种开放的空间数据格式规范，用于高效地传输、加载和渲染大规模三维地理空间数据。它由 Cesium 团队提出，旨在解决传统三维模型格式在处理海量数据时的性能瓶颈。

1.1 核心特性

• 多细节层次 (LOD)：根据相机距离自动加载不同精度的模型
• 流式传输：按需加载数据，减少初始加载时间
• 空间索引：基于地理空间位置组织数据，提高查询效率
• 格式多样性：支持多种三维模型格式（glTF、b3dm、pnts 等）

1.2 应用场景

• 智慧城市三维建模
• 数字孪生系统
• 地理信息系统 (GIS)
• 虚拟现实 (VR) 和增强现实 (AR)
• 无人机航测数据展示

二、基础加载实现

2.1 环境准备

<!-- 引入 Cesium 库 -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.108/Build/Cesium/Cesium.js"></script>
<link
  href="https://cesium.com/downloads/cesiumjs/releases/1.108/Build/Cesium/Widgets/widgets.css"
  rel="stylesheet"
/>

<!-- 创建地图容器 -->
<div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>

2.2 基本加载代码

// 初始化 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3)),
});

// 加载 3D Tiles
const load3DTiles = async tilesetUrl => {
  try {
    // 创建 3D Tileset 实例
    const tileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl, {
      maximumScreenSpaceError: 16, // 控制加载精度
      skipLevelOfDetail: true, // 启用 LOD 跳过优化
      cullWithChildrenBounds: true, // 使用子瓦片边界裁剪
    });

    // 将 tileset 添加到场景
    viewer.scene.primitives.add(tileset);

    // 自动缩放至模型范围
    viewer.zoomTo(tileset);

    return tileset;
  } catch (error) {
    console.error('3D Tiles 加载失败:', error);
    throw error;
  }
};

// 调用加载函数
load3DTiles('https://your-tileset-url/tileset.json');

三、高级配置选项

3.1 性能优化参数

const tilesetOptions = {
  // 精度控制
  maximumScreenSpaceError: 16, // 屏幕空间误差阈值，值越小精度越高
  baseScreenSpaceError: 1024, // 基础屏幕空间误差

  // LOD 优化
  skipLevelOfDetail: true, // 是否跳过某些细节级别
  skipScreenSpaceErrorFactor: 16, // 跳过屏幕空间误差因子
  skipLevels: 1, // 跳过的层级数

  // 内存管理
  cullWithChildrenBounds: true, // 使用子瓦片边界进行裁剪
  dynamicScreenSpaceError: true, // 动态调整屏幕空间误差
  dynamicScreenSpaceErrorDensity: 0.00278, // 动态误差密度
  dynamicScreenSpaceErrorFactor: 4.0, // 动态误差因子
  dynamicScreenSpaceErrorHeightFalloff: 0.25, // 高度衰减因子

  // 加载控制
  preloadWhenHidden: false, // 是否预加载隐藏的瓦片
  preloadFlightDestinations: true, // 是否预加载飞行目标区域

  // 渲染控制
  preferLeaves: false, // 是否优先加载叶子节点
  onlyRenderVisibleTiles: true, // 是否只渲染可见的瓦片
};

3.2 关键参数解析

参数	说明	推荐值
maximumScreenSpaceError	控制模型加载精度，值越小细节越丰富	16-64
skipLevelOfDetail	是否启用 LOD 跳过优化，提升加载速度	true
cullWithChildrenBounds	是否使用子瓦片边界进行裁剪，减少绘制数量	true
dynamicScreenSpaceError	是否根据距离动态调整精度	true
preloadFlightDestinations	是否预加载相机即将到达的区域	true

四、事件与交互

4.1 加载事件监听

const tileset = await load3DTiles('tileset.json');

// 监听加载完成事件
tileset.readyPromise.then(() => {
  console.log('3D Tiles 加载完成');
});

// 监听瓦片加载事件
tileset.tileLoad.addEventListener(tile => {
  console.log('瓦片加载完成:', tile);
});

// 监听瓦片卸载事件
tileset.tileUnload.addEventListener(tile => {
  console.log('瓦片卸载:', tile);
});

// 监听加载错误事件
tileset.tileLoadError.addEventListener((tile, error) => {
  console.error('瓦片加载失败:', tile, error);
});

4.2 模型交互

// 添加点击事件监听
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(movement => {
  const pick = viewer.scene.pick(movement.position);

  if (
    Cesium.defined(pick) &&
    Cesium.defined(pick.primitive) &&
    pick.primitive instanceof Cesium.Cesium3DTileset
  ) {
    console.log('点击了 3D Tiles 模型');
    // 处理点击事件
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 移除事件监听
handler.destroy();

五、性能优化策略

5.1 加载优化

1. 合理设置精度参数 ：根据应用场景调整 maximumScreenSpaceError
2. 启用 LOD 跳过 ：通过 skipLevelOfDetail 等参数提升加载速度
3. 预加载关键区域 ：使用 preloadFlightDestinations 预加载重要区域
4. 缓存策略：利用浏览器缓存减少重复请求

5.2 渲染优化

1. 视锥体裁剪：只渲染相机视锥体内的模型
2. 遮挡剔除：隐藏被其他模型遮挡的瓦片
3. 批处理渲染：合并多个瓦片的渲染命令
4. WebGL 优化：合理设置 WebGL 上下文参数

5.3 内存优化

1. 及时清理资源：移除不再使用的 tileset
2. 限制内存使用：通过参数控制最大内存占用
3. 增量加载：只加载当前需要的部分数据
4. 自动卸载：根据距离自动卸载不再可见的瓦片

六、常见问题与解决方案

6.1 加载失败

问题现象 ：控制台报错，模型无法显示
解决方案：

// 添加错误处理和重试机制
const loadWithRetry = async (url, maxRetries = 3) => {
  let retryCount = 0;

  while (retryCount < maxRetries) {
    try {
      return await Cesium.Cesium3DTileset.fromUrl(url);
    } catch (error) {
      retryCount++;
      console.warn(`加载失败，正在重试第 ${retryCount} 次`);
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }

  throw new Error(`加载失败，已重试 ${maxRetries} 次`);
};

6.2 性能问题

问题现象 ：模型加载缓慢，画面卡顿
解决方案：

// 优化配置参数
const optimizedOptions = {
  maximumScreenSpaceError: 64, // 降低精度提升性能
  skipLevelOfDetail: true,
  skipLevels: 2,
  dynamicScreenSpaceError: true,
  cullWithChildrenBounds: true,
};

6.3 跨域问题

问题现象 ：控制台出现跨域错误
解决方案：

1. 在服务器端配置 CORS 头部
2. 使用代理服务器转发请求
3. 将数据部署到与网站同域的服务器

七、最佳实践

7.1 数据准备

• 使用 Cesium ion 或其他工具将模型转换为 3D Tiles 格式
• 合理设置 LOD 层级，平衡精度和性能
• 优化模型拓扑结构，减少三角形数量

7.2 代码结构

class TilesetManager {
  constructor(viewer) {
    this.viewer = viewer;
    this.tilesets = new Map();
  }

  async loadTileset(id, url, options = {}) {
    if (this.tilesets.has(id)) {
      return this.tilesets.get(id);
    }

    try {
      const tileset = await Cesium.Cesium3DTileset.fromUrl(url, options);
      this.viewer.scene.primitives.add(tileset);
      this.tilesets.set(id, tileset);
      return tileset;
    } catch (error) {
      console.error(`加载 tileset ${id} 失败:`, error);
      throw error;
    }
  }

  removeTileset(id) {
    const tileset = this.tilesets.get(id);
    if (tileset) {
      this.viewer.scene.primitives.remove(tileset);
      this.tilesets.delete(id);
    }
  }

  clearAll() {
    this.tilesets.forEach((tileset, id) => {
      this.viewer.scene.primitives.remove(tileset);
    });
    this.tilesets.clear();
  }
}

7.3 监控与调试

// 监控性能指标
viewer.scene.debugShowFramesPerSecond = true;

// 显示 tileset 边界框
viewer.scene.debugShowPrimitiveBounds = true;

// 输出加载统计信息
setInterval(() => {
  const statistics = viewer.scene3DOnly ? viewer.scene3DOnly.statistics : viewer.scene.statistics;
  console.log('加载的瓦片数量:', statistics.tilesLoaded);
  console.log('渲染的瓦片数量:', statistics.tilesRendered);
}, 1000);

八、总结

3D Tiles 是处理大规模三维地理空间数据的理想解决方案，通过合理的配置和优化，可以在保证视觉效果的同时实现高性能的加载和渲染。掌握 3D Tiles 的加载技术，对于开发数字孪生、智慧城市等现代地理信息应用至关重要。