本文適用於從未接觸過3d開發的新手，尋找解決方案的部分比較詳細，文章最下方有相關包的配置文件，可跳過該部分直接使用。
vite為前端構建工具，我們使用vite來搭建項目基礎結構。
開始 {#getting-started} | Vite中文網
如需安裝其他模板可查看文檔說明。
由於第壹次接手3d開發，並不清楚哪些方案比較合適，所以在開始階段碰到了許多問題，下面是找到解決方案的大致過程。
開發web3d，首先想到的就是用three.js，在參考《 threejs加載3dtiles（傾斜攝影）數據 》這篇文章時也順利完成了數據的加載，但模型界面卻顯示不出來，估計與該文章下這條評論出現了壹樣的問題。
對於3d開發0經驗的我來說，只能不停的搜索相關文檔嘗試解決，花費了幾個小時，始終無法解決，但也得知了cesium這個3d框架更適合加載3dTiles。項目開發時，在有限時間裏不能在壹棵樹上吊死，及時轉換方向能節省更多的時間，最終在對比兩者文檔後果斷放棄three。
相關資料：
threejs加載3dtiles（傾斜攝影）數據
threejs加載3dtiles（傾斜攝影）數據_Always（壹直如此）的博客-CSDN博客_threejs 傾斜攝影
three-loader-3dtiles
GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js
3DTilesRendererJS
GitHub - nytimes/three-loader-3dtiles: This is a Three.js loader module for handling OGC 3D Tiles, created by Cesium. It currently supports the two main formats, Batched 3D Model (b3dm) - based on glTF Point cloud.
cesium天然支持3dTiles格式，加載3dTiles很簡單，但需要進行額外的配置。
網上有很多vue使用cesium的配置教程，但大部分都是使用webpack進行配置，而且vue2版本居多，各種資料的內容又參差不齊，對於本項目來說造成了額外的時間成本，對新手來說非常不友好。
我在嘗試配置後發現始終無效，而且對於這些配置的意思也無法理解，最終放棄直接使用cesium，繼續尋找更方便的vue + cesium的解決方案。
cesium.js中文文檔
Camera - Cesium Documentation
在壹番查找後，最終選擇了vue-cesium，vue-cesium支持vue3、typescript，我把他稱為3d版的element-ui，開箱即用，非常方便，免去了各種令人頭疼耗時的配置過程，對新手非常友好。
文檔：
VueCesium - Vue 2.x & Vue 3.x components for CesiumJS.
安裝：
使用：
安裝完成後，妳可以選擇完整引入或者按需導入，因為我只用到其中幾個組件，所以我選擇了按需導入，使用 VcPrimitiveTileset 這個組件就能導入3dTiles文件。
其他具體業務的實現查看文檔即可，如果妳使用過element-ui，那妳壹定會使用vue-cesium。
在使用過程中發現的問題：
1.文檔 VcOverlayHtml 組件描述錯誤
正確引入樣式文件：import 'vue-cesium/dist/index.css’
如果妳打開文檔時顯示是正確的，那就表示文檔已經更新過了。
2.build打包報錯
打包時，vue-cesium源碼內會有ts報錯，幾乎都是Cesium未找到的錯誤，這個需要在tsconfig.json中忽略對node_modules 中的檢查，妳可以配置只忽略 vue-cesium 這個包，我是全部忽略了。
註意：如果妳的項目根目錄沒有配置tsconfig.json，需要先添加該文件，參考： tsconfig.json · TypeScript中文網 · TypeScript——JavaScript的超集
在引用vue-cesium組件的文件內ts也會Cesiu未找到的錯誤，可以配置ts只忽略該文件。
如果妳在使用跟我壹樣版本的vue-cesium時也出現上述的錯誤，不用慌張，我們看到VcConfigProvider這個全局配置組件是使用CDN為vue-cesium導入cesium某個版本的，而不是模塊化的導入。
由於沒看過vue-cesium的源碼實現，我猜測原因就是這個，因為沒有影響任何功能的實現，我直接使用 // @ts-nocheck 忽略了整個文件的ts檢查。
項目使用的各個包及其版本號：