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模型

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) 倾斜摄影测量 地下管网 点云数据可视化

数据转换与处理

  1. 3D Tiles生成工具

  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. 数据处理和转换是整个工作流程中的重要环节
相关推荐
Echo``4 小时前
2:点云处理—3D相机开发
人工智能·笔记·数码相机·算法·计算机视觉·3d·视觉检测
前端小崔15 小时前
从零开始学习three.js(14):一文详解three.js中的粒子系统Points
开发语言·前端·javascript·学习·3d·webgl·数据可视化
取个好名称21 小时前
如何开始使用 Blender:Blender 3D 初学者指南和简介 怎么下载格式模型
3d·blender
工业3D_大熊1 天前
破解工业3D可视化困局,HOOPS Visualize助力高效跨平台协作与交互!
3d·3d可视化·3d模型可视化·工业3d·3d模型渲染·3d协同·桌面端3d渲染
sunbyte1 天前
Three.js + React 实战系列 - 项目展示区开发详解 Projects 组件(3D 模型 + 动效 + 状态切换)✨
javascript·react.js·3d
zfyljx1 天前
3D堆叠卡片
css·3d·css3
白熊1882 天前
【计算机视觉】3d人脸重建:3DDFA_V2:实时高精度3D人脸重建与密集对齐技术指南
人工智能·计算机视觉·3d
新时代的弩力2 天前
Cesium添加WMS,WMTS,地形图图,3D Tiles数据
数据库·3d
白熊1882 天前
【计算机视觉】3d人体重建:PIFu/PIFuHD:高精度三维人体数字化技术指南
人工智能·计算机视觉·3d