网站导航
> 技术文档 > Cesium 3D Tiles_cesium加载3dtiles

Cesium 3D Tiles_cesium加载3dtiles

网友: 技术文档 2025-07-30 19:09:52

Cesium 3D Tiles 入门学习指南

什么是3D Tiles?

#mermaid-svg-YBoJTsA1FjDB6oVf {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .error-icon{fill:#552222;}#mermaid-svg-YBoJTsA1FjDB6oVf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-YBoJTsA1FjDB6oVf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-YBoJTsA1FjDB6oVf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-YBoJTsA1FjDB6oVf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-YBoJTsA1FjDB6oVf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-YBoJTsA1FjDB6oVf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-YBoJTsA1FjDB6oVf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-YBoJTsA1FjDB6oVf .marker.cross{stroke:#333333;}#mermaid-svg-YBoJTsA1FjDB6oVf svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-YBoJTsA1FjDB6oVf .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .cluster-label text{fill:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .cluster-label span{color:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .label text,#mermaid-svg-YBoJTsA1FjDB6oVf span{fill:#333;color:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .node rect,#mermaid-svg-YBoJTsA1FjDB6oVf .node circle,#mermaid-svg-YBoJTsA1FjDB6oVf .node ellipse,#mermaid-svg-YBoJTsA1FjDB6oVf .node polygon,#mermaid-svg-YBoJTsA1FjDB6oVf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-YBoJTsA1FjDB6oVf .node .label{text-align:center;}#mermaid-svg-YBoJTsA1FjDB6oVf .node.clickable{cursor:pointer;}#mermaid-svg-YBoJTsA1FjDB6oVf .arrowheadPath{fill:#333333;}#mermaid-svg-YBoJTsA1FjDB6oVf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-YBoJTsA1FjDB6oVf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-YBoJTsA1FjDB6oVf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-YBoJTsA1FjDB6oVf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-YBoJTsA1FjDB6oVf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-YBoJTsA1FjDB6oVf .cluster text{fill:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf .cluster span{color:#333;}#mermaid-svg-YBoJTsA1FjDB6oVf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-YBoJTsA1FjDB6oVf :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 3D Tiles 开放式空间数据标准 用于海量三维数据流式传输 支持LOD层次细节技术 支持多种数据类型 建筑物(b3dm) 点云(pnts) 矢量数据(vctr) 实例化模型(i3dm) 复合瓦片(cmpt)

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

3D Tiles 工作原理

#mermaid-svg-SqNA7L1u5qpkKG08 {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .error-icon{fill:#552222;}#mermaid-svg-SqNA7L1u5qpkKG08 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SqNA7L1u5qpkKG08 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SqNA7L1u5qpkKG08 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SqNA7L1u5qpkKG08 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SqNA7L1u5qpkKG08 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SqNA7L1u5qpkKG08 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SqNA7L1u5qpkKG08 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SqNA7L1u5qpkKG08 .marker.cross{stroke:#333333;}#mermaid-svg-SqNA7L1u5qpkKG08 svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SqNA7L1u5qpkKG08 .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .cluster-label text{fill:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .cluster-label span{color:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .label text,#mermaid-svg-SqNA7L1u5qpkKG08 span{fill:#333;color:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .node rect,#mermaid-svg-SqNA7L1u5qpkKG08 .node circle,#mermaid-svg-SqNA7L1u5qpkKG08 .node ellipse,#mermaid-svg-SqNA7L1u5qpkKG08 .node polygon,#mermaid-svg-SqNA7L1u5qpkKG08 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SqNA7L1u5qpkKG08 .node .label{text-align:center;}#mermaid-svg-SqNA7L1u5qpkKG08 .node.clickable{cursor:pointer;}#mermaid-svg-SqNA7L1u5qpkKG08 .arrowheadPath{fill:#333333;}#mermaid-svg-SqNA7L1u5qpkKG08 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-SqNA7L1u5qpkKG08 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-SqNA7L1u5qpkKG08 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-SqNA7L1u5qpkKG08 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-SqNA7L1u5qpkKG08 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-SqNA7L1u5qpkKG08 .cluster text{fill:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 .cluster span{color:#333;}#mermaid-svg-SqNA7L1u5qpkKG08 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-SqNA7L1u5qpkKG08 :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 数据分层 空间索引结构 按需加载 自动调整细节级别

  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 优化技巧

#mermaid-svg-WtvalpaKuYuyzPRk {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .error-icon{fill:#552222;}#mermaid-svg-WtvalpaKuYuyzPRk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WtvalpaKuYuyzPRk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WtvalpaKuYuyzPRk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WtvalpaKuYuyzPRk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WtvalpaKuYuyzPRk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WtvalpaKuYuyzPRk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WtvalpaKuYuyzPRk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WtvalpaKuYuyzPRk .marker.cross{stroke:#333333;}#mermaid-svg-WtvalpaKuYuyzPRk svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WtvalpaKuYuyzPRk .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .cluster-label text{fill:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .cluster-label span{color:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .label text,#mermaid-svg-WtvalpaKuYuyzPRk span{fill:#333;color:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .node rect,#mermaid-svg-WtvalpaKuYuyzPRk .node circle,#mermaid-svg-WtvalpaKuYuyzPRk .node ellipse,#mermaid-svg-WtvalpaKuYuyzPRk .node polygon,#mermaid-svg-WtvalpaKuYuyzPRk .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WtvalpaKuYuyzPRk .node .label{text-align:center;}#mermaid-svg-WtvalpaKuYuyzPRk .node.clickable{cursor:pointer;}#mermaid-svg-WtvalpaKuYuyzPRk .arrowheadPath{fill:#333333;}#mermaid-svg-WtvalpaKuYuyzPRk .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WtvalpaKuYuyzPRk .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WtvalpaKuYuyzPRk .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WtvalpaKuYuyzPRk .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WtvalpaKuYuyzPRk .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WtvalpaKuYuyzPRk .cluster text{fill:#333;}#mermaid-svg-WtvalpaKuYuyzPRk .cluster span{color:#333;}#mermaid-svg-WtvalpaKuYuyzPRk div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WtvalpaKuYuyzPRk :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 性能优化 调整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 实用场景

#mermaid-svg-hWtfXUcgSJGN87Ei {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .error-icon{fill:#552222;}#mermaid-svg-hWtfXUcgSJGN87Ei .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hWtfXUcgSJGN87Ei .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hWtfXUcgSJGN87Ei .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hWtfXUcgSJGN87Ei .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hWtfXUcgSJGN87Ei .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hWtfXUcgSJGN87Ei .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hWtfXUcgSJGN87Ei .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hWtfXUcgSJGN87Ei .marker.cross{stroke:#333333;}#mermaid-svg-hWtfXUcgSJGN87Ei svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hWtfXUcgSJGN87Ei .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .cluster-label text{fill:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .cluster-label span{color:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .label text,#mermaid-svg-hWtfXUcgSJGN87Ei span{fill:#333;color:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .node rect,#mermaid-svg-hWtfXUcgSJGN87Ei .node circle,#mermaid-svg-hWtfXUcgSJGN87Ei .node ellipse,#mermaid-svg-hWtfXUcgSJGN87Ei .node polygon,#mermaid-svg-hWtfXUcgSJGN87Ei .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hWtfXUcgSJGN87Ei .node .label{text-align:center;}#mermaid-svg-hWtfXUcgSJGN87Ei .node.clickable{cursor:pointer;}#mermaid-svg-hWtfXUcgSJGN87Ei .arrowheadPath{fill:#333333;}#mermaid-svg-hWtfXUcgSJGN87Ei .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-hWtfXUcgSJGN87Ei .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-hWtfXUcgSJGN87Ei .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-hWtfXUcgSJGN87Ei .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-hWtfXUcgSJGN87Ei .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-hWtfXUcgSJGN87Ei .cluster text{fill:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei .cluster span{color:#333;}#mermaid-svg-hWtfXUcgSJGN87Ei div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-hWtfXUcgSJGN87Ei :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 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. 数据处理和转换是整个工作流程中的重要环节
网络标签：

相关问题