Three.js教程
cesium
3D Tiles

3D Tiles

3D Tiles是 Cesium 开源社区提出的一种针对三维数据的切片和索引标准，其核心目标是解决“海量三维数据的高效传输和可视化”问题。

该标准在 2021 年正式被 OGC（Open Geospatial Consortium）采纳，成为开放地理信息行业的重要规范之一。

与传统的三维数据格式相比，3D Tiles 注重分块管理、LOD（Level of Detail）调度以及可渐进加载——让客户端在网络带宽受限的情况下也能快速查看三维场景并进行交互。

简而言之，3D Tiles 相当于为三维世界提供了一种“瓦片式组织和调度方案”，让我们可以像加载在线地图切片一样，自适应地加载三维场景的各个部分，从而获得更流畅的浏览体验。

3D Tiles 的主要特点

  1. 分块与层级（Tiling & LOD）
    3D Tiles 将三维数据按照空间位置和精细程度拆分成不同分辨率的瓦片（Tiles），并通过 LOD 来控制加载程度。场景中的每个模型都会被组织成树状结构，由粗到细依次加载并替换，最大程度节省网络和 GPU 资源。
  2. 可扩展的 Tile 格式
    3D Tiles 并非只针对某一种三维数据格式，它本身提供了一套可容纳多种数据格式的瓦片规范。例如：b3dm（批处理 BIM/倾斜摄影模型瓦片）、i3dm（实例化对象瓦片）、pnts（点云瓦片）、cmpt（复合瓦片）等等，方便在一个 3D Tiles 场景中同时管理多种类型的数据。
  3. 渐进式加载与可视化
    当我们在浏览一个场景时，3D Tiles 会自动加载最必要的瓦片以提供基本的场景内容。当视角深入或靠近某片区域时，再加载更高精度的瓦片并替换原有瓦片，形成平滑过渡。这种渐进加载机制，不仅提升了用户体验，也显著降低了网络流量与内存占用。
  4. 开源、规范、可持续
    3D Tiles 本身是开源的标准，获得了社区广泛的支持。它还成为 OGC 标准，意味着它会长期受到地理信息产业、三维可视化产业的共同维护，降低了技术使用的风险。

3D Tiles 的应用场景

  1. 城市级数字孪生
    利用倾斜摄影、激光点云或 BIM 等数据构建城市级三维模型，使用 3D Tiles 进行切片和加载。在城市大范围浏览时只显示低精度模型，随着视点的移动实时加载局部高精度模型，节省带宽和算力，提高系统响应速度。
  2. 三维 GIS 分析
    3D Tiles 可与传统 GIS 系统结合，对建筑物、地形、植被等进行三维可视化分析。结合地理要素属性，可进行日照分析、通视分析、地形量算等功能。
  3. BIM 与 CIM 融合
    随着对智慧城市和城市信息模型（CIM）的需求越来越高，将 BIM 数据采用 3D Tiles 进行发布，可以与大场景数据（如城市倾斜摄影模型）进行融合展示，实现更完整、更细节的城市数字孪生。

加载谷歌 3dtiles

Google 在 2023 年宣布与 Cesium 合作，将谷歌高逼真度的 3D 城市模型以 3D Tiles 的形式对外开放（需遵循相关使用条款）。

Cesium 提供了 createGooglePhotorealistic3DTileset() 接口，支持直接加载谷歌的 3D 瓦片服务。

const viewer = new Cesium.Viewer(container, {
  globe: false, // 关闭默认地球
  geocoder: Cesium.IonGeocodeProviderType.GOOGLE, // 使用 Google 地理编码器
});
 
// 加载 Google Photorealistic 3D Tiles
const tileset = await Cesium.createGooglePhotorealistic3DTileset();
viewer.scene.primitives.add(tileset);
console.log("Google Photorealistic 3D Tiles 加载成功");
  • 访问授权与配额：在企业或商业项目中使用谷歌的 3D Tiles 往往需要考虑访问授权、API Key、流量配额等问题，确保数据获取合法合规。
  • 性能调优：谷歌 3D Tiles 可能覆盖多城市大范围数据，初次加载可能体量很大。可以通过控制相机起始位置、maximumScreenSpaceError（最大屏幕误差）等参数来减少不必要的细节加载。
  • 高逼真纹理：谷歌的 3D 瓦片通常贴合真实的纹理与模型，适合做城市级的逼真可视化和三维地图展示，也可以用来快速搭建无人机飞行模拟、城市漫游等应用。

加载 OSM Buildings

OSM Buildings 是由 Cesium 官方提供的另一组 3D Tiles 数据集（基于 OpenStreetMap 生成的建筑模型），更适合对建筑形状、高度进行可视化，并带有一定的元数据，但纹理精细度通常不如倾斜摄影模型。

它的优点是加载轻量、覆盖全球主要城市并保持一定的更新速度。

const viewer = new Cesium.Viewer(container, {});
const osmBuildings = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(osmBuildings);
  • 外观与样式：OSM Buildings 多数仅有简单的建筑外观，可通过 Cesium3DTileStyle（如根据建筑层数、用途等）自定义建筑的颜色、透明度或高亮效果，实现专题图或属性可视化。
  • 轻量化：相较于高精度的倾斜摄影，OSM Buildings 的模型往往更简化，加载速度和渲染性能更好，适合大范围城市展示。
  • 属性数据：若你需要对建筑进行点击拾取（pick）并查看其属性信息，可借助 OSM 提供的唯一 ID、坐标信息等进行二次开发或与其他数据库关联。

加载本地 3D Tiles

在很多实际项目中，数据源来自自建或第三方单位提供的三维模型（BIM、倾斜摄影、点云等），通过离线工具（如 Cesium ion、Bentley ContextCapture、或开源工具等）生成 3D Tiles。然后再将生成后的 tileset.json 及相关数据文件放在本地或服务器上，即可使用 Cesium 的 API 加载。

const viewer = new Cesium.Viewer(container, {});
 
const tilesetUrl = new URL("./data/tileset.json", import.meta.url).href;
 
// 使用 fromUrl 方法加载 3D Tiles
const tileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl);
 
// 添加到场景中
viewer.scene.primitives.add(tileset);
 
// 缩放到 tileset
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
  • 文件结构：本地 3D Tiles 通常包括 tileset.json、.b3dm（或其他后缀）文件及相应纹理文件等。要保持相对路径正确，或者确保发布到服务器时访问路径与 tileset.json 中一致。
  • 瓦片边界与 LOD：在生成 3D Tiles 时，会定义每个瓦片的 boundingVolume 以及不同层级的 LOD。若想更好地调试或优化加载，可以在生成阶段对瓦片划分策略进行调整（例如合并一些小瓦片或细分过大的瓦片）。
  • 属性与批量处理：若模型包含属性信息（例如 BIM 的构件类型、材质等），可通过 featureProperties 读取并进行高亮、过滤或交互操作，实现更高级的行业应用（如工程管理、设备维护等）。

参考

https://cesium.com/why-cesium/3d-tiles/ (opens in a new tab)

使用blender生成城市群Cesium 几何体