Cesium loading 3D tiles model

I have a problem recently , Use the three-dimensional model of tilt Photography Made by Dajiang UAV , It needs to be loaded on the map for display . After exporting from Dajiang's mapping software , The suffix of 3D model file is b3dm, After consulting the data, it is found that , yes 3D Tiles Format .

3D Tiles

3D Tiles It is an open 3D spatial data standard , It is designed to improve the loading and rendering speed of models in large 3D scenes , It can be understood as a tile of a three-dimensional scene . If you want to be in Web The client renders a very large 3D model （ Such as the architectural model of a big city ）, If you download all the models to the client and render them , The time consumed in this process is unacceptable to users using ordinary computers . However , In the vast majority of user interactive 3D scenes , Only a small part of the model needs to be rendered , Loading and rendering all 3D models is a great waste of resources ,3D Tiles It provides a good solution to this problem . Organize 3D spatial data into 3D Tiles Format , It can realize on-demand loading and rendering of models , So as to achieve a smooth 3D model browsing experience .3D Tiles It is also a hierarchical model organized in a tree structure , The difference is that the two-dimensional Tile Map divides the two-dimensional space ,3D Tiles Is to divide the three-dimensional space .

Load code

vue And cesium Development environment construction , Reference resources 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 = ' You applied for token'; }, mounted(){
       // "cesiumContainer" You need to render the map dom Of 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(" Loading complete ") 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>

In the code , Used 3D Tiles Model , Can be in https://download.csdn.net/download/GISuuser/85708223?spm=1001.2014.3001.5503 download

effect