基于Three.js的三維可視化引擎在壓縮空氣儲能電站中的應用與研究

摘 要：隨著“GIS+BIM”時代的到來，“GIS+BIM”技術的發展對智慧電站的建設起到了加速劑的作用，“GIS+BIM”技術的應用可以帶來顯著的經濟效益、社會效益和環境效益。針對新一代數字電網建設，為解決數據冗余、不直觀等問題，三維可視化引擎依托壓縮空氣儲能電站完成三維模型可視化、仿真模擬、場景漫游、文檔掛接、屬性查看等功能，為智慧電站建設提供高可用、極穩定的平臺支撐。

關鍵詞：Three.js；三維可視化；壓縮空氣儲能；仿真模擬

中圖分類號：TP391.4 文獻標識碼：A 文章編號：2096-4706（2024）16-0131-05

Application and Research of 3D Visual Engine Based on ThreeJS in

Compressed Air Energy Storage Power Station

Abstract： With the advent of the“GIS+BIM”era， the development of“GIS+BIM”technology has played a role in promoting the construction of smart power stations. The application of“GIS+BIM”technology can bring significant economic， social， and environmental benefits. For the construction of the new generation digital power grid， in order to solve problems such as data redundancy and lack of intuitiveness， the 3D visual engine relies on compressed air energy storage power stations to complete functions such as 3D model visualization， simulation， scene roaming， document hanging， and attribute viewing， providing highly available and extremely stable platform support for the construction of smart power stations.

Keywords： Three.js; 3D visualization; compressed air energy storage; simulation

0 引 言

隨著近幾年來智慧電廠概念的興起，整個電力行業都聚焦在智慧電廠變電站數字化的技術應用環節。變電站數字化是多學科技術有機整合為一體的交叉學科，BIM技術是一種現代化的建模手段[1]。在HTML5和WebGL等互聯網技術快速發展的背景之下[2]，參考“互聯網+”思維，將BIM與WebGIS相融合[3]，客觀、完整地獲取電站設備元器件幾何和色彩等資料，實現對變電站全站模型以及主設備和輔助設備的三維結構可視化[4]。電網數字化建設是國家電網有限公司落實國企改革三年行動、建設現代設備管理體系的重要舉措[5]。

電網數字化、電站智能化，使得變電站三維可視化變得格外重要，小場景+輕量化+高性能的電站模型三維可視化成為當下的技術熱點。當下國內商業解決方案中，已知的商業解決方案動輒耗資幾十萬甚至上百萬，而且商業方案部署過程中也存在各種各樣的約束，幾乎不支持私有服務器部署，數據安全無法保證；成熟的商業解決方案和定制開發也存在諸多限制，無法滿足項目需求。因此，進行輕量化、高性能、跨平臺的電站三維模型可視化技術研究變得非常必要，電站模型在PC網頁端和手機網頁端的瀏覽變得更加輕松，大幅提升了用戶體驗，降低了項目成本，提高了生產效益。

本文從壓縮空氣儲能電站項目實際需求出發，為解決壓縮空氣儲能電站內部設備不直觀、模型數據量大、三維模型可視化不流暢等問題，開展WebGL底層技術、三維仿真技術及性能優化研究，構建基于Three.js+BIM的空氣壓縮儲能電站三維可視化平臺，實現模型數據可視化、通用功能、三維場景仿真模擬等功能開發，為空氣壓縮儲能電站項目提供三維可視化平臺，為實現電網工程設計的數字化、精細化和可視化提供更好的手段和表達方式[6]。

1 技術研發

基于底層Three.js技術、React框架、TypeScript語言，研發了電站模型三維可視化平臺，實現了電站模型三維可視化在壓縮空氣儲能項目中的應用。

1.1 Three.js技術介紹

Three.js是一款基于WebGL技術運行在瀏覽器中的3D引擎[7]，默認WebGL只支持簡單的點、線、三角，是一款運行在瀏覽器中的3D引擎，提供非常多的3D顯示功能，可以用它來創建各種三維場景，包括攝影機、光影、材質等對象，并提供多種三維模型加載器，在二維、三維渲染上有明顯的性能優勢。Three.js是運用JavaScript編寫而成的，它類屬于WebGL [8]，Three.js能夠充分發揮GPU渲染器的渲染能力、場景搭建能力、光源創建能力。

1.2 3D Tiles數據格式

3D Tiles是由Cesium團隊為擴展地形和圖像流而在glTF數據格式基礎上建立的三維模型瓦片數據結構，可對大規模三維地理空間數據進行流式傳輸[9]。在3D Tiles中，一個Tileset是由一系列Tile組成的樹狀結構，它包含的具體數據格式如表1所示。

3D Tile以樹的結構形式組織，結合了層次LOD的概念，實現空間數據最佳渲染，提升整體性能。3D Tile結構圖如圖1所示。

1.3 Three.js中的坐標系

Three.js中的坐標系是右手坐標系，在使用Three.js加載模型時，實際還會用到2D和3D坐標系。如軌道控制器可以改變相機在空間坐標系中的位置：軌道控制器響應鼠標事件（中間鍵滾輪縮放、右鍵按下平移、左鍵按下旋轉）。調整相機在坐標系中的位置。改變坐標，重新渲染；通過3D到2D坐標系的變換實現模型的縮放、平移、旋轉：

1）右手坐標系。x軸水平方向：向右為正；y軸垂直方向：向上為正；z軸內外方向（垂直于xy平面）：向外為正，如圖2所示。

2）世界坐標系。世界坐標系即場景坐標系，是以Vector3（0，0，0）為原點的XYZ坐標軸的坐標系，如圖3所示。

3）局部坐標系。局部坐標系即模型坐標系，是以局部模型中心為原點，繪制XYZ坐標軸的坐標系，如圖4所示。

4）屏幕坐標系。屏幕坐標系就是canvas中的坐標系，也就是左上角是坐標原點的二維坐標系，如圖5所示。

2 關鍵技術研究

2.1 WebGL底層技術研究

本平臺中的3D Tileset數據包含三種數據格式，分別為i3dm、b3dm、cmpt。其中i3dm和b3dm格式的模型需要使用Shader著色器，改變模型材質顏色和透明度。WebGL是Web圖形庫，提供一系列的圖形接口，計算機GPU負責瀏覽器圖形渲染的工具。因為3D Tileset數據格式特點，GPU渲染管線上提供的頂點著色器單元對圖形渲染非常友好，使用GLSL語言編寫頂點著色器，對三角面片頂點進行顏色渲染，可以改變電站設備顏色和透明度，提升渲染效率，達到大數據模型快速高效渲染的效果。

2.2 性能優化研究專題

本平臺在大數量模型加載時，對電腦GPU和內存提出了較高的要求，GPU和內存具有較大的場景渲染壓力，導致三維可視化不流暢、用戶體驗不佳。為減輕本平臺三維場景渲染壓力，降低內存占用，保證渲染效果及為用戶帶來良好使用體驗，需要展開性能優化研究專題，這是本平臺研究的重點和難點。

2.3 BIM模型輕量化

電網模型具有高密度分布、施工建設時間連貫的特點，變電站集中分布著發電機組、電器元件、廠房、變壓器等變電設備。三維模型的重要內容涉及幾何拓撲信息、模型紋理特征、模型材質特點。BIM模型輕量化需要在保持原有數據結構、材質、紋理特征的前提下，刪減一定量的頂點并重新構建三角面片[10]，簡化紋理，在保留變電站模型細節的基礎上最大程度簡化BIM模型，是本平臺研究的重點和難點。

2.4 可視化平臺技術線路

針對當前瀏覽器網絡環境和三維變電站模型高效可視化需求，三維可視化引擎采用Three.js底層技術框架，展示層采用React框架，VSCode平臺編碼，HTML5+CSS網頁展示，開源CesiumLab解析工具將FBX、OBJ、GLB格式數據轉換成3D Tiles格式數據，轉換后的3D Tiles模型流向模型存儲模塊。

模型存儲模塊支持OSS、MinIO和Nginx文件管理服務器，通過三維可視化模塊顯示到PC端、移動端和大屏等終端。

可視化模塊提供三維電站模塊可視化、GIS支撐、仿真模擬和通用功能。總體技術線路圖如圖6所示。

2.4.1 模型格式轉換

BIM模型數據量在幾百MB到GB之間時，若想實現快速渲染、幾何面片構建、材質渲染，需要通過CesiumLab開源軟件實現BIM模型的數據格式轉換，將BIM模型數據轉換為3Dtilets數據格式。3Dtilets數據格式是分層分塊的金字塔型結構，可以實現模型的高效渲染。

2.4.2 性能優化

本平臺的性能優化從以下三方面入手：

1）LOD性能優化。LOD（Levels of Detail）技術通常用于優化大場景模型可視化性能，是一種實時三維計算機圖形技術。相機視點距離物體較近時，能觀察到的模型細節豐富；相機視點遠離模型時，觀察到的細節逐漸模糊。系統繪圖程序根據一定的判斷條件，選擇相應的細節進行顯示，GPU實現高效渲染計算。

2）按需渲染。假設場景本身就是靜止的，沒有任何物體變化，此時依然進行不間斷的循環渲染是對瀏覽器性能和客戶端電量的一種浪費。為避免這種現象的發生，在最開始加載模型渲染的時候，僅渲染有變化的地方，避免連續渲染占用瀏覽器內存，當瀏覽器窗口大小改變，不會重新渲染場景，實現場景瀏覽的快速響應，保證平臺的流暢性和良好的用戶體驗。

3）GLSL語言GPU渲染。現代GPU所包含的渲染管線為可編程渲染管線，可以通過編程GLSL著色器語言來控制一些渲染階段的細節，基于3D Tiles數據特點，在模型加載時使用shader改變模型頂點著色，提升渲染效率和平臺性能。

2.5 可視化平臺功能設計

平臺從業務場景出發，提供了逼真的三維場景和友好的三維交互操作功能，提供了以下5個核心功能模塊：

1）模型可視化。本平臺支持3D Tiles格式數據，通過URL加載.json格式文件，實現對模型數據的加載、渲染、可視化。

2）施工進度仿真模擬。平臺支持以時間為基準的施工進度仿真模擬，通過改變設備顏色，顯隱滿足不同業務場景的施工進度模擬，滿足不同業務需求。

3）包圍盒剖切。變電站廠房內部和大型變電設備內部的構造往往是不清楚的，內部設備被遮擋，本平臺提供包圍盒剖切功能，利用包圍盒剖切瀏覽內部構造，方便對設備進行維護。

4）場景漫游。本平臺支持第一人稱場景漫游和飛行漫游兩種漫游模式，配合鍵盤鼠標操作實現場景縮放、旋轉、平移等功能，滿足三維可視化業務場景需求。

5）基礎業務功能。本平臺提供場景通用操作功能：模型量測、框選放大、模型虛化。空間量測功能包括經緯度量測、局部坐標量測、高程量測、距離量測、面積量測、角度測量。框選放大功能即用戶通過鼠標框選操作快速定位目標區域，幫助用戶快速瀏覽三維場景。模型虛化功能，即是指變電站中很多設備是在廠房內部，或者是地下層，通過外層模型虛化暴露內層模型設備，讓用戶快速瀏覽內部場景。

3 應用成果

本平臺已應用于壓縮空氣儲能電站項目，實現了電站模型可視化、包圍盒剖切、模型量測、場景漫游等功能，為變電站模型可視化提供了解決方案，為用戶查看在線變電站模型提供了便利，提升了用戶體驗。本平臺也存在不足之處，例如包圍盒剖切目前只實現了整體模型剖切，后期需要繼續研究并優化功能，實現單個設備包圍盒剖切。

3.1 模型可視化

用戶首次打開可視化平臺時呈現的場景，模型的加載可視化，通過鼠標縮放、移動操作實現模型的快速瀏覽，如圖7所示。

3.2 包圍盒剖切

當用戶查看電站模型內部結構時，可以使用包圍盒剖切功能。包圍盒剖切包括六個面，每個面可以單獨剖切模型，配合鼠標放大縮小旋轉平移操作，幫助用戶快速瀏覽包圍盒剖切模型內部場景，如圖8所示。

3.3 場景漫游

場景漫游由第一人稱漫游和飛行漫游兩種漫游模式組成，幫助用戶沉浸式瀏覽場景。第一人稱漫游中，用戶可以在虛擬場景中以第一人稱的視角自由移動和探索，使用鼠標和鍵盤控制場景縮放、前進、后退、加速、減速來實現場景漫游，如圖9所示。

3.4 模型測量

模型測量幫助用戶直觀獲取模型表面參數，包括長度測量、寬度測量、高度測量、面積測量和角度測量，為用戶提供業務需求支撐，如圖10所示。

4 結 論

隨著BIM+GIS的快速發展，Three.js+BIM三維可視化技術在電力行業有著廣泛的應用。本文論述了Three.js+BIM可視化技術在空氣壓縮儲能電站項目中的應用，空氣壓縮儲能電站可視化平臺實現了對變電站建設中產生的變電站模型、數字模型、模型編碼以及模型節點等數據成果的統一管理，直觀展示了三維模型不同施工階段的三維場景。本平臺的研發對促進電力行業的智慧電力建設、電力數字化建設和電力一體化建設有著十分重要的意義。

參考文獻：

[1] 弓國軍，符國暉，周亞敏.基于BIM技術的變電站三維可視化建模研究 [J].電子制作，2022，30（2）：66-68.

[2] 胡夏愷，陳俊濤，楊聃，等.基于Revit二次開發的BIM+WebGIS融合應用研究 [J].中南大學學報：自然科學版，2021，52（11）：3930-3942.

[3] 胡夏愷，楊聃，朱悅林，等.基于BIM+WebGIS的輸電系統結構安全監測可視化平臺構建 [J].中國農村水利水電，2020（12）：185-188+192.

[4] 陶松梅，張煒.基于CIM模型的變電站三維可視化交互技術應用 [J].廣西電力，2014，37（6）：22-24+37.

[5] 陶銀正.基于三維全景的電網數字化建設研究與應用思路構建 [J].安徽電氣工程職業技術學院學報，2021，26（4）：82-86.

[6] 初建祥，張彥彪，羅金龍，等.3D打印BIM模型在變電站三維可視化設計中的應用 [J].電力勘測設計，2022（10）：1-6+76.

[7] 陳雪婷，王澤宇，寇柏源，等.基于BIM的建筑模型三維可視化運維管理平臺 [J].綠色建造與智能建筑，2023（4）：33-36+40.

[8] 周浩成.Web3D可視化技術的研究與應用 [J].智慧中國，2022（1）：78-79.

[9] 易立華.基于Cesium的WebGIS與BIM集成研究 [D].西安：長安大學，2023.

[10] 王芳，尤一銘，余婷立.WebGIS三維可視化平臺在電網數字化移交中的應用研究[J].現代信息科技，2021，5（17）：7-11.