基于Three.js的3D機(jī)場態(tài)勢(shì)系統(tǒng)設(shè)計(jì)

（中國電子科技集團(tuán)公司第二十八研究所 南京 210007）

1 引言

隨著主流瀏覽器對(duì)HTML5以及WebGL的全面支持，瀏覽器已成為展現(xiàn)復(fù)雜應(yīng)用和圖形的平臺(tái)，在瀏覽器端不僅可以創(chuàng)建二維應(yīng)用和圖像，而且可以通過GPU渲染技術(shù)支持復(fù)雜3D應(yīng)用，目前瀏覽器借助GPU技術(shù)支持?jǐn)?shù)萬量級(jí)模型的實(shí)時(shí)渲染，因此對(duì)于機(jī)場這類復(fù)雜態(tài)勢(shì)系統(tǒng)研制成為可能，基于Web的應(yīng)用系統(tǒng)成為當(dāng)今網(wǎng)絡(luò)技術(shù)重點(diǎn)研究方向。

虛擬現(xiàn)實(shí)技術(shù)的快速發(fā)展為其進(jìn)一步實(shí)現(xiàn)打下了堅(jiān)實(shí)基礎(chǔ)。作為新一代人機(jī)交互方式，虛擬現(xiàn)實(shí)已計(jì)算機(jī)圖形圖像技術(shù)為基礎(chǔ)，通過構(gòu)造仿真對(duì)象的三維模型并再現(xiàn)真實(shí)的環(huán)境，從而達(dá)到身臨其境的逼真仿真效果[1]，如今使用較多的虛擬現(xiàn)實(shí)軟件VRP，Virtools，Unity3D等都需要安裝相應(yīng)的渲染插件[2]，本文利用封裝了WebGL低級(jí)別API的Three.js通過把3D MAX軟件建模的OBJ格式模型進(jìn)行加載、渲染和交互從而在瀏覽器無插件呈現(xiàn)3D機(jī)場態(tài)勢(shì)。

2 關(guān)鍵技術(shù)介紹

2.1 WebGL與Three.js

WebGL作為3D繪圖協(xié)議，其免費(fèi)與跨平臺(tái)特點(diǎn)帶來廣泛應(yīng)用，并已成為HTML5重要組成規(guī)范，它通過HTML5 Canvas元素對(duì)外暴露DOM（Document Object Model）API接口[3]，徹底解決了一直以來嚴(yán)重阻礙Web交互式三維動(dòng)畫發(fā)展的兩個(gè)關(guān)鍵問題：第一易用性問題，它通過DOM接口直接操作HTML頁面元素實(shí)現(xiàn)Web交互式三維動(dòng)畫的制作，無需安裝任何瀏覽器插件，用戶體驗(yàn)得到了極大的提升；第二性能問題，它通過統(tǒng)一標(biāo)準(zhǔn)化且能夠跨平臺(tái)的OpenGL接口實(shí)現(xiàn)直接利用底層圖形硬件加速功能進(jìn)行圖形渲染，使得能夠在瀏覽器中借助系統(tǒng)顯卡呈現(xiàn)擁有很多精細(xì)3D模型的復(fù)雜態(tài)勢(shì)成為可能。

雖然利用WebGL的API使得前端開發(fā)者可以在網(wǎng)頁面中直接構(gòu)建復(fù)雜3D模型對(duì)象與復(fù)雜環(huán)境場景，但是需要掌握WebGL底層細(xì)節(jié)，其質(zhì)量與效率也難以保證。為了構(gòu)建一個(gè)高效率的、對(duì)前端開發(fā)者學(xué)習(xí)曲線相對(duì)平滑的WebGL開發(fā)環(huán)境，許多開源JavaScript庫被創(chuàng)造出來，則其中Three.js是目前應(yīng)用最廣泛，它不僅提供了簡單易懂的JavaS-cript API，并且集輕量級(jí)、開源免費(fèi)等優(yōu)秀品質(zhì)于一身[4～5]。 Three.js提供了點(diǎn)、線、面、矩陣等所需的基本元素，結(jié)合相機(jī)（cameras）、物體（objects）、光線（lights）、場景（scene）、渲染器（renderer）等，即可在頁面上進(jìn)行三維模型的構(gòu)建與人機(jī)交互，成為在瀏覽器上展現(xiàn)復(fù)雜大型3D態(tài)勢(shì)首要選擇。

2.2 態(tài)勢(shì)模型構(gòu)建

機(jī)場態(tài)勢(shì)是復(fù)雜多維的態(tài)勢(shì)系統(tǒng)，其整體結(jié)構(gòu)主要包括的模型構(gòu)建為以下幾個(gè)部分：機(jī)場跑道模塊、航站樓模塊、機(jī)場指揮塔模塊、飛機(jī)模塊、機(jī)場綜合大樓模塊等。本文利用3D MAX軟件構(gòu)建OBJ格式的相關(guān)模型如圖1～圖4所示。

圖1 機(jī)場航站樓模型

圖2 機(jī)場指揮塔模型

圖3 飛機(jī)模型

圖4 機(jī)場綜合大樓模型

2.3 Vue.js與SpingBoot

態(tài)勢(shì)系統(tǒng)的前端構(gòu)建主要基于Vue.js，它是一種MVVM（Model-ViewViewModel）模式的前端框架，采用自底向上增量開發(fā)設(shè)計(jì)，其核心庫只聚焦于視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面庫[6]。后端框架基于目前主流微服務(wù)框架SpringBoot，通過SpringBoot來簡化開發(fā)過程、配置過程、部署過程以及監(jiān)控過程。MVC（Model-View-Controller，模型—視圖—控制器[7]）是Web[8～9]開發(fā)中的一種設(shè)計(jì)模式。SpringBoot通過springMVC為構(gòu)建Web應(yīng)用程序提供全功能MVC模塊。

3 機(jī)場態(tài)勢(shì)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

3.1 總體設(shè)計(jì)

基于Three.js的3D機(jī)場態(tài)勢(shì)系統(tǒng)是對(duì)機(jī)場運(yùn)行的數(shù)字化和虛擬化處理，是現(xiàn)實(shí)世界的數(shù)字孿生。以B/S架構(gòu)為基礎(chǔ)，其前端為Vue框架+Three.js，后端為 SpringBoot+MyBatis+MySql，其整個(gè)系統(tǒng)功能設(shè)計(jì)為以下四個(gè)部分：1）飛機(jī)出入管理模塊。通過實(shí)時(shí)呈現(xiàn)起飛與降落狀態(tài)，給機(jī)場管理人員帶來沉浸感以及支撐指揮調(diào)度科學(xué)化。2）天氣數(shù)據(jù)管理模塊。通過呈現(xiàn)天氣數(shù)據(jù)把控機(jī)場相關(guān)調(diào)度。3）機(jī)場人員管理模塊。通過對(duì)機(jī)場候機(jī)人員以及機(jī)場工作人員進(jìn)行實(shí)時(shí)呈現(xiàn)，支撐管理人員科學(xué)合理調(diào)度相關(guān)資源。4）機(jī)場設(shè)備管理模塊。通過對(duì)機(jī)場設(shè)備進(jìn)行實(shí)時(shí)監(jiān)控，快速高效進(jìn)行設(shè)備維護(hù)與管理。

3.2 基于Three.js的模型顯示與交互

對(duì)于機(jī)場態(tài)勢(shì)展現(xiàn)主要運(yùn)用Three.js加載把3D MAX創(chuàng)建好的OBJ格式模型，再跟進(jìn)用戶的交互需求去驅(qū)動(dòng)模型，其主要過程為以下幾步：

1）創(chuàng)建三維場景：場景是模型顯示運(yùn)行的空間，相當(dāng)于一個(gè)容器對(duì)應(yīng)用于現(xiàn)實(shí)的三維空間。

2）設(shè)置攝像機(jī)：在Three.js中，要將三維空間中的對(duì)象投影到二維空間只需把攝像機(jī)設(shè)置為透視投影和正投投影這兩種方式。

3）設(shè)置光源：通過增加光源的光照讓機(jī)場態(tài)勢(shì)更具備沉浸感，在Three.js場景中光源主要為聚光燈、點(diǎn)光源、面光源、半球光等。

4）設(shè)置渲染：渲染器就是通過調(diào)用渲染函數(shù)使存在于三維空間里的模型以二維平面的形式在網(wǎng)頁中顯現(xiàn)出來[10]，它是3D引擎的核心組件。

5）加載OBJ文件：Three.js支持多種格式加載，其中基礎(chǔ)的加載器主要包括Loader、FileLoader、FontLoader等；紋理加載器包括TextureLoader、CubeTextureLoader、DataTextureLoader等；文件加載器包括 BabylonLoader、ColladaLoader、OBJLoader等；對(duì)于加載OBJ模型時(shí)，需要使用OBJLoader加載器[11]。

6）模型的平移、旋轉(zhuǎn)、縮放等：Three.js提供了視角控制器、飛行控制器、翻滾控制器等攝像機(jī)控件，通過控制操作這些攝像機(jī)控件來操作攝像機(jī)的位置，從而實(shí)現(xiàn)模型的平移、旋轉(zhuǎn)、縮放[12]。

3.3 機(jī)場態(tài)勢(shì)實(shí)現(xiàn)與運(yùn)行

利用Three.js強(qiáng)大的基于WebGL技術(shù)的3D圖形引擎技術(shù)，將3D MAX導(dǎo)出的OBJ模型在瀏覽器中進(jìn)行3D渲染并結(jié)合實(shí)時(shí)數(shù)據(jù)進(jìn)行實(shí)時(shí)呈現(xiàn)，達(dá)到對(duì)現(xiàn)實(shí)世界進(jìn)行數(shù)字化和虛擬化處理，實(shí)現(xiàn)對(duì)現(xiàn)實(shí)世界的數(shù)字孿生，機(jī)場態(tài)勢(shì)運(yùn)行效果如圖5～圖6所示。

圖5 機(jī)場運(yùn)行整體態(tài)勢(shì)

4 結(jié)語

本文研究了機(jī)場態(tài)勢(shì)整體設(shè)計(jì)方案和實(shí)現(xiàn)方法，對(duì)Three.js如何加載模型以及模型交互等主要步驟進(jìn)行了總結(jié)，呈現(xiàn)了Three.js強(qiáng)大的基于Web-GL技術(shù)的3D圖形引擎渲染效果，可以看出伴隨主流瀏覽器對(duì)HTML5以及WebGL的全面支持，基于Three.js的3D態(tài)勢(shì)系統(tǒng)將成為Web領(lǐng)域的熱點(diǎn)應(yīng)用。

圖6 機(jī)場運(yùn)行局部態(tài)勢(shì)