Cesium 3D Tiles

Cesium 3D Tiles 入门学习指南

什么是3D Tiles?

3D Tiles

开放式空间数据标准

用于海量三维数据流式传输

支持LOD层次细节技术

支持多种数据类型

建筑物(b3dm)

点云(pnts)

矢量数据(vctr)

实例化模型(i3dm)

复合瓦片(cmpt)

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

3D Tiles 工作原理

数据分层

空间索引结构

按需加载

自动调整细节级别

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

3D Tiles 基本使用

1. 加载3D Tiles模型

// 创建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. 设置瓦片样式

// 使用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. 瓦片事件处理

// 监听瓦片加载事件
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

处理遮挡剔除

关键优化参数

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. 剪裁平面

// 创建剪裁平面集合
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. 模型交互与拾取

// 为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)

倾斜摄影测量

地下管网

点云数据可视化

数据转换与处理

1. 3D Tiles生成工具

   • Cesium ion: 官方云服务，支持多种格式转换为3D Tiles
   • py3dtiles: Python库，用于生成3D Tiles
   • 3d-tiles-tools: Cesium官方工具集

2. 常见源数据格式

   • OBJ、FBX、DAE(Collada)、glTF: 3D模型格式
   • LAS/LAZ: 点云格式
   • CityGML: 城市模型格式
   • OSGB: 倾斜摄影测量格式

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

进阶学习路径

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

常见问题与解决方案

1. 加载慢或卡顿

   • 调大maximumScreenSpaceError值
   • 开启skipLevelOfDetail和相关优化参数
   • 检查模型是否过于复杂，考虑简化模型

2. 模型位置不正确

   • 检查坐标系统是否匹配
   • 使用modelMatrix调整位置和朝向
   • 应用heightOffset调整高度

3. 模型不显示

   • 检查URL路径是否正确
   • 查看控制台是否有404错误
   • 检查CORS跨域设置

4. 内存占用过高

   • 减小maximumMemoryUsage值
   • 启用cullWithChildrenBounds优化剔除
   • 考虑分区域加载大模型

⭐ 重点总结：

1. 3D Tiles是处理海量三维数据的标准解决方案
2. 通过分层LOD和按需加载实现高效渲染
3. 性能调优是应用3D Tiles的关键挑战
4. 数据处理和转换是整个工作流程中的重要环节