Cesium加载3D Tiles模型

最近遇到一个问题，使用大疆无人机做的倾斜摄影三维模型，需要加载到地图上进行显示。从大疆的制图软件导出后，三维模型文件的后缀名为b3dm，经查阅资料发现，是3D Tiles格式。

3D Tiles

3D Tiles是一种开放的三维空间数据标准，其设计目的主要是为了提升大的三维场景中模型的加载和渲染速度，可以理解为三维场景的瓦片。假如要在Web客户端渲染一个非常大的三维模型（如一个大城市的建筑模型），如果把模型全部下载到客户端并且进行渲染，这个过程所消耗的时间对于使用普通电脑的用户来说是不能接受的。然而，在绝大多数的用户交互式的三维场景中，都只需要渲染模型的一小部分，将三维模型全部加载并渲染是一种极大的资源浪费，3D Tiles为这个问题提供了一个很好的解决方案。将三维空间数据组织为3D Tiles格式，可以实现模型的按需加载和渲染，从而实现流畅的三维模型浏览体验。3D Tiles也是按树形结构组织的层次模型，不同的是二维瓦片地图是对二维空间进行划分，3D Tiles是对三维空间进行划分。

加载代码

vue与cesium开发环境搭建，参考https://blog.csdn.net/GISuuser/article/details/125376282?spm=1001.2014.3001.5501

<template>
  <div id="cesiumContainer">

  </div>
</template>

<script>
import * as Cesium from 'cesium';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    window.CESIUM_BASE_URL = '/cesium/';
    Cesium.Ion.defaultAccessToken = '你申请的token';
  },
  mounted(){
    // "cesiumContainer"是需要渲染地图的dom的id.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
   
    let tileSetModel = new Cesium.Cesium3DTileset({
      url: "./terra_b3dms/tileset.json"
    });
    
    tileSetModel.readyPromise.then( tileset=> {
      console.log("加载完成")
      viewer.scene.primitives.add(tileset);
      viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
    }).catch(function (error) {
      console.log(error);
    });

  }
}
</script>

<style scoped>
 #cesiumContainer{
   width: 100%;
   height: 100%;
 }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

代码中，使用到的3D Tiles模型，可以在https://download.csdn.net/download/GISuuser/85708223?spm=1001.2014.3001.5503下载

效果