導航:首頁 > 源碼編譯 > 攻城略地源碼分析

攻城略地源碼分析

發布時間:2022-12-11 23:38:58

A. 【 攻城略地 】vue3 + vite + ts載入3dTiles

本文適用於從未接觸過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 mole 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_moles 中的檢查,你可以配置只忽略 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檢查。

項目使用的各個包及其版本號:

B. 安卓游戲攻城掠地源碼

應用匯的游戲都不錯的,你可以安個應用匯去那裡面下啊,還安全,它還有最近超級流行的游戲,還有經典小游戲,玩著超級爽。

閱讀全文

與攻城略地源碼分析相關的資料

熱點內容
安卓手機拍照為什麼總是抖動 瀏覽:250
汽車車載app如何下載 瀏覽:24
python復合型數據類型 瀏覽:375
登錄伺服器發生錯誤怎麼回事 瀏覽:272
松下空氣能壓縮機 瀏覽:938
萬能源碼播放器 瀏覽:968
串口伺服器如何轉發 瀏覽:359
如何下載Ck電影部app 瀏覽:744
解壓文具筆袋簡單 瀏覽:288
android百度坐標轉換 瀏覽:367
文件公私鑰加密傳輸 瀏覽:665
python矩陣維度 瀏覽:927
華佗舌診源碼 瀏覽:897
解壓壓縮包有一個錯誤怎麼辦 瀏覽:966
怎麼在手機上設立文件夾 瀏覽:232
雲幫手伺服器搭建教程 瀏覽:785
惠普默認存在哪個文件夾 瀏覽:493
建立桌面圖標文件夾 瀏覽:86
python怎麼跳過異常繼續執行 瀏覽:315
單片機驅動可控硅 瀏覽:294