Cesium 3D Tiles - 技术栈

Cesium 3D Tiles 入门学习指南

什么是3D Tiles?

3D Tiles 开放式空间数据标准用于海量三维数据流式传输支持LOD层次细节技术支持多种数据类型建筑物(b3dm) 点云(pnts) 矢量数据(vctr) 实例化模型(i3dm) 复合瓦片(cmpt)

⭐ 重点： 3D Tiles是Cesium开发的用于处理海量三维地理数据的开放标准，类似于2D地图的瓦片系统，但专为3D数据优化。

3D Tiles 工作原理

数据分层空间索引结构按需加载自动调整细节级别

分层数据结构：将大型3D模型分割成许多小瓦片
空间索引：使用空间数据结构组织瓦片(通常是四叉树或八叉树)
层次细节(LOD)：根据摄像机距离决定加载哪些层级的瓦片
流式传输：按需加载可见区域内的瓦片，而不是一次加载全部

3D Tiles 基本使用

1. 加载3D Tiles模型

javascript 复制代码

// 创建3D Tiles图层
const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: 'http://example.com/tileset.json', // tileset.json文件路径
    maximumScreenSpaceError: 16, // 控制LOD级别的参数，越小越精细
    maximumMemoryUsage: 512 // 内存使用上限(MB)
  })
);

// 加载完成后定位到模型
tileset.readyPromise.then(function(tileset) {
  // 缩放到瓦片数据集
  viewer.zoomTo(tileset);
  
  // 或者手动设置相机位置
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-30),
      roll: 0.0
    }
  });
});

2. 设置瓦片样式

javascript 复制代码

// 使用Cesium的样式语言设置瓦片样式
tileset.style = new Cesium.Cesium3DTileStyle({
  // 颜色表达式
  color: {
    conditions: [
      // 根据高度着色
      ['${height} >= 100', 'color("red")'],
      ['${height} >= 50', 'color("orange")'],
      ['${height} >= 25', 'color("yellow")'],
      ['${height} >= 10', 'color("lime")'],
      ['true', 'color("cyan")']
    ]
  },
  // 缩放表达式
  scale: '${height} / 100 + 0.5',
  // 是否显示
  show: '${height} > 0'
});

⭐ 重点： 3D Tiles支持强大的样式语言，可以基于属性动态控制颜色、透明度、显示与否等特性。

3. 瓦片事件处理

javascript 复制代码

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

// 监听瓦片失败事件
tileset.tileFailed.addEventListener(function(error) {
  console.error('瓦片加载失败:', error);
});

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

// 监听所有瓦片加载完成事件
tileset.allTilesLoaded.addEventListener(function() {
  console.log('所有可见瓦片已加载完成');
});

3D Tiles 优化技巧

性能优化调整maximumScreenSpaceError 设置合理的maximumMemoryUsage 使用skipLevelOfDetail优化应用preloadFlightDestinations 处理遮挡剔除

关键优化参数

javascript 复制代码

const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: 'http://example.com/tileset.json',
    // 控制细节级别，值越小越精细但性能消耗越大
    maximumScreenSpaceError: 16,
    
    // 内存管理
    maximumMemoryUsage: 512,
    
    // 跳级加载优化
    skipLevelOfDetail: true,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    
    // 预加载优化
    preloadWhenHidden: true,
    preloadFlightDestinations: true,
    
    // 剔除优化
    cullWithChildrenBounds: true,
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10
  })
);

⭐ 重点： 合理设置maximumScreenSpaceError是性能优化的关键，值越大加载速度越快但精度越低，需要平衡性能和视觉效果。

3D Tiles 高级功能

1. 剪裁平面

javascript 复制代码

// 创建剪裁平面集合
const clipPlanes = new Cesium.ClippingPlaneCollection({
  planes: [
    // 创建一个剪裁平面，法向量指向东方，位置在原点
    new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 0.0)
  ],
  edgeWidth: 1.0, // 剪裁边缘宽度
  edgeColor: Cesium.Color.WHITE,
  enabled: true
});

// 将剪裁平面应用到瓦片集
tileset.clippingPlanes = clipPlanes;

// 动态调整剪裁平面
function updateClipPlane() {
  // 获取模型中心位置
  const boundingSphere = tileset.boundingSphere;
  const center = boundingSphere.center;
  
  // 更新剪裁平面距离
  clipPlanes.get(0).distance = Cesium.Cartesian3.distance(
    center,
    clipPlanes.get(0).normal
  ) * Math.sin(Cesium.Math.toRadians(viewer.clock.currentTime.secondsOfDay));
}

viewer.scene.preRender.addEventListener(updateClipPlane);

2. 模型交互与拾取

javascript 复制代码

// 为3D Tiles模型添加点击事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click) {
  // 执行拾取操作
  const pickedFeature = viewer.scene.pick(click.position);
  
  // 检查是否拾取到了3D Tiles要素
  if (Cesium.defined(pickedFeature) && 
      pickedFeature instanceof Cesium.Cesium3DTileFeature) {
    
    // 读取属性
    const propertyIds = pickedFeature.getPropertyIds();
    console.log('属性列表:', propertyIds);
    
    // 获取具体属性值
    propertyIds.forEach(propertyId => {
      console.log(propertyId + ': ' + pickedFeature.getProperty(propertyId));
    });
    
    // 修改要素样式
    pickedFeature.color = Cesium.Color.YELLOW;
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

⭐ 重点： 3D Tiles的每个要素可以包含丰富的属性数据，通过拾取可以实现查询和交互功能。

3D Tiles 数据类型

类型	后缀	用途	特点
Batched 3D Model	`.b3dm`	建筑物、地形等	支持合并绘制，适合建筑群
Instanced 3D Model	`.i3dm`	树木、灯杆等重复对象	内存高效，适合大量相似对象
Point Cloud	`.pnts`	激光扫描点云	支持海量点数据，适合地形测量
Vector Data	`.vctr`	矢量数据(如线、面)	适合细节丰富的矢量几何体
Composite	`.cmpt`	混合多种类型	将多种类型组合为单一瓦片

3D Tiles 实用场景

3D Tiles应用场景智慧城市建筑信息模型(BIM) 倾斜摄影测量地下管网点云数据可视化

数据转换与处理

3D Tiles生成工具
- Cesium ion: 官方云服务，支持多种格式转换为3D Tiles
- py3dtiles: Python库，用于生成3D Tiles
- 3d-tiles-tools: Cesium官方工具集
常见源数据格式
- OBJ、FBX、DAE(Collada)、glTF: 3D模型格式
- LAS/LAZ: 点云格式
- CityGML: 城市模型格式
- OSGB: 倾斜摄影测量格式

⭐ 重点： 数据处理是3D Tiles应用中最具挑战性的环节，通常需要专业工具进行模型优化和转换。

进阶学习路径

基础应用 → 了解3D Tiles基本用法和参数
样式与交互 → 学习样式语言和事件处理
性能优化 → 掌握各种性能调优参数和技巧
高级功能 → 探索剪裁平面、模型融合等高级功能
数据处理 → 学习数据转换和优化技术

常见问题与解决方案

加载慢或卡顿
- 调大maximumScreenSpaceError值
- 开启skipLevelOfDetail和相关优化参数
- 检查模型是否过于复杂，考虑简化模型
模型位置不正确
- 检查坐标系统是否匹配
- 使用modelMatrix调整位置和朝向
- 应用heightOffset调整高度
模型不显示
- 检查URL路径是否正确
- 查看控制台是否有404错误
- 检查CORS跨域设置
内存占用过高
- 减小maximumMemoryUsage值
- 启用cullWithChildrenBounds优化剔除
- 考虑分区域加载大模型

⭐ 重点总结：

3D Tiles是处理海量三维数据的标准解决方案

通过分层LOD和按需加载实现高效渲染

性能调优是应用3D Tiles的关键挑战

数据处理和转换是整个工作流程中的重要环节