3D Tiles

小孙同学大约 2 分钟

3D Tiles 简介

3D Tiles 是 Cesium 于 2016 年 3 月定义的一种三维模型瓦片数据格式，目前已经是 OGC 标准之一，3D Tiles 将海量三维数据以分块分层的形式组织起来，大大减轻了浏览器和 GPU 的负担。

3D Tiles 专为流式传输和渲染 3D 地理数据而设计的，如倾斜摄影测量、BIM、点云、建筑数据等。特点有：

开放且灵活。 3D Tiles 作为开放数据规范，其切片方案灵活可变，三维模型的切片大小和覆盖范围可以人为设置。此外，3D Tiles 还可以适配三维空间中多种空间分区方案，如四叉树、八叉树、KD 树等。
异质性支持。 通过一组已定义的文件格式，将多种三维地理空间要素（如倾斜摄影测量、BIM、点云、建筑数据、实例化要素等）转换为三维形式的单个数据集，同时又允许多种不同格式标准的模型显示在同一场景中。
专为三维可视化设计。 3D Tiles 建立在 gltf 格式之上，并引入了三维图形学技术，以树状的层级细节模型（HLOD）进行组织，降低海量数据可视化过程中的浏览器负担，减少 WebGL 绘制请求的数量。
可交互。 3D Tiles 支持交互旋转和样式的设置。如单击高亮，修改单个模型的材质，根据属性信息设置不同的显示效果等。

代码示例

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script setup>
import { onMounted } from "vue";

async function init() {
  const viewer = new Cesium.Viewer(cesiumContainer, { infoBox: false });
  const tileset = await Cesium.Cesium3DTileset.fromUrl("./data/tileset.json");
  viewer.scene.primitives.add(tileset);
  viewer.zoomTo(tileset);
}

onMounted(() => {
  init();
});
</script>

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<style scoped></style>

参考资料

3dTiles 规范仓库：https://github.com/CesiumGS/3d-tiles
本文数据下载地址：https://github.com/CesiumGS/3d-tiles-samples
3dTiles 格式介绍：https://blog.csdn.net/whl0071/article/details/126000225