今天我们要学习的是cesium 3DTiles与性能监控。

3D Tileset 数据结构介绍

渲染3d瓦片数据结构介绍：

{
  // "asset" 对象包含有关 tileset 的基本信息
  "asset": {
    // 3D Tiles 规范的版本
    "version": "1.0",
    // tileset 的版本（可选）
    "tilesetVersion": "1.2.3"
  },
  // "extras" 对象包含额外的自定义信息（可选）
  "extras": {
    "name": "Sample Tileset"
  },
  // "properties" 对象包含有关该 tileset 的属性的元数据（可选）
  "properties": {
    "id": {
      "minimum": 0,
      "maximum": 9
    },
    "Longitude": {
      "minimum": -1.3197192952275933,
      "maximum": -1.319644104024109
    },
    "Latitude": {
      "minimum": 0.698848878034009,
      "maximum": 0.6989046192460953
    },
    "Height": {
      "minimum": 6.161747192963958,
      "maximum": 85.41026367992163
    }
  },
  // 全局几何误差，用于 LOD（细节层次）切换
  "geometricError": 240,
  // 根 tile 的信息
  "root": {
    // 根 tile 的包围体
    "boundingVolume": {
      "region": [
        -1.3197209591796106, 0.6988424218, -1.3196390408203893, 0.6989055782, 0,
        88
      ]
    },
    // 根 tile 的几何误差
    "geometricError": 30,
    // 细化策略，"ADD" 或 "REPLACE"
    "refine": "ADD",
    // 根 tile 的内容
    "content": {
      "uri": "parent.b3dm",
      "boundingVolume": {
        "region": [
          -1.3197004795898053, 0.6988582109, -1.3196595204101946, 0.6988897891,
          0, 88
        ]
      }
    },
    // 子 tile 的数组
    "children": [
      // ...（子 tile 的详细信息）
    ]
  }
}

这里只列出了一些主要的字段，实际的 tileset.json 文件可能还包含更多字段和更复杂的结构。

• "geometricError" 是用于决定何时加载该 tile 的一个关键参数。
• "boundingVolume" 描述了 tile 的空间范围。
• "refine" 字段指定了如何在多个层次之间进行过渡（"ADD" 或 "REPLACE"）。
• "content" 包含了实际的模型数据，通常是一个 .b3dm、.i3dm 或 .pnts 文件。
• "children" 是一个数组，包含了子 tile 的信息，每个子 tile 也有类似的结构。

实例代码

// 创建一个新的 Cesium3DTileset 实例，通过指定 tileset.json 文件的 URL 来加载 3D Tiles 数据
const tileset = new Cesium.Cesium3DTileset({
  url: './lesson29/assets/tileset.json',
});

// 将创建的 3D Tileset 实例添加到场景的 primitives 集合中
viewer.scene.primitives.add(tileset);

// 当 3D Tileset 完全加载后执行的操作
tileset.readyPromise.then(function (tileset) {
  // 将视图缩放到加载的 3D Tiles 覆盖的区域
  viewer.zoomTo(tileset);
});

添加3D Tiles 的调试面板

// 扩展查看器以包含 3D Tiles 的调试面板，用于检查和调试 3D Tiles 数据
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);

实例演示地址

cesium 3DTiles与性能监控

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium 3DTiles与性能监控-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14