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>

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

效果