本文適用于從未接觸過(guò)3d開(kāi)發(fā)的新手，尋找解決方案的部分比較詳細(xì)，文章最下方有相關(guān)包的配置文件，可跳過(guò)該部分直接使用。
安裝vite
vite為前端構(gòu)建工具，我們使用vite來(lái)搭建項(xiàng)目基礎(chǔ)結(jié)構(gòu)。
文檔：
開(kāi)始 {#getting-started} | Vite中文網(wǎng)
安裝：
# 使用 NPM
$ npm init vite@latest
# 使用 Yarn
$ yarn create vite
# 使用 PNPM
$ pnpm create vite
使用vite搭建vue3 + ts項(xiàng)目
安裝：
# npm 6.x
npm init vite@latest my-vue-app --template vue-ts
# npm 7+, 需要額外的雙橫線
npm init vite@latest my-vue-app -- --template vue-ts
# yarn
yarn create vite my-vue-app --template vue-ts
# pnpm
pnpm create vite my-vue-app -- --template vue-ts
如需安裝其他模板可查看文檔說(shuō)明。
加載3dTiles文件
由于第一次接手3d開(kāi)發(fā)，并不清楚哪些方案比較合適，所以在開(kāi)始階段碰到了許多問(wèn)題，下面是找到解決方案的大致過(guò)程。
方案1：three.js
開(kāi)發(fā)web3d，首先想到的就是用three.js，在參考《threejs加載3dtiles（傾斜攝影）數(shù)據(jù)》這篇文章時(shí)也順利完成了數(shù)據(jù)的加載，但模型界面卻顯示不出來(lái)，估計(jì)與該文章下這條評(píng)論出現(xiàn)了一樣的問(wèn)題。
對(duì)于3d開(kāi)發(fā)0經(jīng)驗(yàn)的我來(lái)說(shuō)，只能不停的搜索相關(guān)文檔嘗試解決，花費(fèi)了幾個(gè)小時(shí)，始終無(wú)法解決，但也得知了cesium這個(gè)3d框架更適合加載3dTiles。項(xiàng)目開(kāi)發(fā)時(shí)，在有限時(shí)間里不能在一棵樹(shù)上吊死，及時(shí)轉(zhuǎn)換方向能節(jié)省更多的時(shí)間，最終在對(duì)比兩者文檔后果斷放棄three。
相關(guān)資料：
threejs加載3dtiles（傾斜攝影）數(shù)據(jù)
threejs加載3dtiles（傾斜攝影）數(shù)據(jù)_Always（一直如此）的博客-CSDN博客_threejs 傾斜攝影
three-loader-3dtiles
GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js
3DTilesRendererJS
方案2：cesium.js
cesium天然支持3dTiles格式，加載3dTiles很簡(jiǎn)單，但需要進(jìn)行額外的配置。
網(wǎng)上有很多vue使用cesium的配置教程，但大部分都是使用webpack進(jìn)行配置，而且vue2版本居多，各種資料的內(nèi)容又參差不齊，對(duì)于本項(xiàng)目來(lái)說(shuō)造成了額外的時(shí)間成本，對(duì)新手來(lái)說(shuō)非常不友好。
我在嘗試配置后發(fā)現(xiàn)始終無(wú)效，而且對(duì)于這些配置的意思也無(wú)法理解，最終放棄直接使用cesium，繼續(xù)尋找更方便的vue + cesium的解決方案。
cesium.js中文文檔
方案3：vue-cesium
在一番查找后，最終選擇了vue-cesium，vue-cesium支持vue3、typescript，我把他稱為3d版的element-ui，開(kāi)箱即用，非常方便，免去了各種令人頭疼耗時(shí)的配置過(guò)程，對(duì)新手非常友好。
文檔：
VueCesium - Vue 2.x & Vue 3.x components for CesiumJS.
安裝：
# NPM
$ npm install vue-cesium@next --save
# Yarn
$ yarn add vue-cesium@next
# pnpm
$ pnpm install vue-cesium@next
使用：
安裝完成后，你可以選擇完整引入或者按需導(dǎo)入，因?yàn)槲抑挥玫狡渲袔讉€(gè)組件，所以我選擇了按需導(dǎo)入，使用 VcPrimitiveTileset 這個(gè)組件就能導(dǎo)入3dTiles文件。
其他具體業(yè)務(wù)的實(shí)現(xiàn)查看文檔即可，如果你使用過(guò)element-ui，那你一定會(huì)使用vue-cesium。
在使用過(guò)程中發(fā)現(xiàn)的問(wèn)題：
1.文檔VcOverlayHtml組件描述錯(cuò)誤
正確引入樣式文件：import 'vue-cesium/dist/index.css’
如果你打開(kāi)文檔時(shí)顯示是正確的，那就表示文檔已經(jīng)更新過(guò)了。
2.build打包報(bào)錯(cuò)
打包時(shí)，vue-cesium源碼內(nèi)會(huì)有ts報(bào)錯(cuò)，幾乎都是Cesium未找到的錯(cuò)誤，這個(gè)需要在tsconfig.json中忽略對(duì)node_modules 中的檢查，你可以配置只忽略 vue-cesium 這個(gè)包，我是全部忽略了。
// tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true,
...
},
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/",
"./node_modules/@types/node/index.d.ts",
…
],
}
注意：如果你的項(xiàng)目根目錄沒(méi)有配置tsconfig.json，需要先添加該文件，參考：tsconfig.json · TypeScript中文網(wǎng) · TypeScript——JavaScript的超集
在引用vue-cesium組件的文件內(nèi)ts也會(huì)Cesiu未找到的錯(cuò)誤，可以配置ts只忽略該文件。
// ExampleComponent.vue
<script lang="ts">
// @ts-nocheck
…
</script>
如果你在使用跟我一樣版本的vue-cesium時(shí)也出現(xiàn)上述的錯(cuò)誤，不用慌張，我們看到VcConfigProvider這個(gè)全局配置組件是使用CDN為vue-cesium導(dǎo)入cesium某個(gè)版本的，而不是模塊化的導(dǎo)入。
<vc-config-provider
:cesium-path='https://cdn.jsdelivr.net/npm/cesium@latest/Build/Cesium/Cesium.js'>
</ vc-config-provider>
由于沒(méi)看過(guò)vue-cesium的源碼實(shí)現(xiàn)，我猜測(cè)原因就是這個(gè)，因?yàn)闆](méi)有影響任何功能的實(shí)現(xiàn)，我直接使用 // @ts-nocheck 忽略了整個(gè)文件的ts檢查。
總結(jié)
項(xiàng)目使用的各個(gè)包及其版本號(hào)：
// package.json
"dependencies": {
"vue": "^3.2.25",
"vue-cesium": "^3.0.9",
…
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"typescript": "^4.5.4",
"vite": "^2.8.3",
"vue-tsc": "^0.29.8"
…
}
