謝燕剛 張毅 劉正寅

【摘? 要】隨著GIS向Web化，二維向三維化發(fā)展，三維WebGL已經(jīng)逐漸成為GIS學(xué)科和BIM學(xué)科發(fā)展的熱點(diǎn)，涉及科技發(fā)展的多個(gè)領(lǐng)域，極具技術(shù)研究和應(yīng)用價(jià)值?；赪ebGL技術(shù)的軌道交通綜合安防系統(tǒng)三維可視化應(yīng)用研究涉及WebGL技術(shù)、Three.js技術(shù)、CSS+HTML+JS技術(shù)、Jquery技術(shù)、JSON技術(shù)等。論文基于WebGL的三維場(chǎng)景可視化關(guān)鍵技術(shù)，主要是通過(guò)3DMax軟件將模型轉(zhuǎn)換成obj格式，再通過(guò)Three.js框架的OBJLoader加載器加載obj模型，最后在Web端進(jìn)行三維可視化渲染。

【Abstract】With the development from GIS to Web and from 2D to 3D， 3D WebGL has gradually become the hot spot in the development of GIS and BIM， which involves many fields of science and technology development， and is of great technical research and application value. The 3D visualization application research of rail transit integrated security system based on WebGL technology involves WebGL technology， Three. js technology， CSS+HTML+JS technology， Jquery technology， JSON technology and so on. The key technology of 3D scene visualization based on WebGL is to convert the model into obj format through 3DMax software， and then load the obj model through the OBJLoader of Three.js framework， and finally perform 3D visualization rendering on the Web side.

【關(guān)鍵詞】WebGL;BIM模型;三維可視化;Three. js

【Keywords】WebGL; BIM model; 3D visualization; Three.js

【中圖分類號(hào)】U231;TP18? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻(xiàn)標(biāo)志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號(hào)】1673-1069（2021）02-0177-03

1 引言

隨著互聯(lián)網(wǎng)的發(fā)展，計(jì)算機(jī)性能的進(jìn)步，工業(yè)智能化水平的提升，以及現(xiàn)代瀏覽器對(duì)WebGL技術(shù)應(yīng)用的支持，實(shí)現(xiàn)的功能越來(lái)越復(fù)雜化，智能設(shè)備在生產(chǎn)中的大量應(yīng)用，管理起來(lái)越來(lái)越復(fù)雜。這些高新技術(shù)提高了企業(yè)的智能化水平和生產(chǎn)效率，同時(shí)也帶來(lái)了相應(yīng)的管理難度。WebGL技術(shù)的發(fā)展，為解決這些問(wèn)題提供了良好的解決方案，實(shí)現(xiàn)了系統(tǒng)管理的更加高效智能。本文主要通過(guò)Three.js技術(shù)實(shí)現(xiàn)BIM模型的三維可視化渲染，實(shí)現(xiàn)安防系統(tǒng)的高效智能管理。

2 核心技術(shù)簡(jiǎn)介

2.1 WebGL技術(shù)簡(jiǎn)介

WebGL（全寫(xiě)Web Graphics Library）基于OpenGL ES，是一種在Web瀏覽器中渲染3D圖形的JavaScript API，無(wú)需任何插件，通過(guò)WebGL技術(shù)， Web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡來(lái)實(shí)現(xiàn)在瀏覽器里更流暢地展示3D場(chǎng)景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和直觀的數(shù)據(jù)視覺(jué)化。相較于傳統(tǒng)的Web交互式技術(shù)，WebGL技術(shù)有兩大優(yōu)勢(shì)：

①它通過(guò)JavaScript實(shí)現(xiàn)Web交互式三維動(dòng)畫(huà)的制作，無(wú)需任何瀏覽器插件支持;②它利用底層的圖形硬件加速功能進(jìn)行的圖形渲染，是通過(guò)統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL接口來(lái)實(shí)現(xiàn)。

2.2 Three.js技術(shù)簡(jiǎn)介

如果直接使用WebGL進(jìn)行開(kāi)發(fā)三維模型系統(tǒng)，開(kāi)發(fā)效率相對(duì)較低，技術(shù)門檻較高，需要開(kāi)發(fā)者對(duì)計(jì)算機(jī)三維圖形圖像學(xué)、線性代數(shù)、矩陣運(yùn)算等知識(shí)有深入的掌握，開(kāi)發(fā)成本較大。為了解決上述問(wèn)題，出現(xiàn)了基于JavaScript語(yǔ)言的第三方庫(kù)Three.js。Three.js是WebGL的一個(gè)開(kāi)源框架，是一款運(yùn)行在瀏覽器中的3D引擎，它底層封裝了相應(yīng)的圖形處理接口、矩陣運(yùn)算接口等，可以通過(guò)JavaScript語(yǔ)言直接調(diào)用，可以大大減少開(kāi)發(fā)者的工作量，具有代碼體積小、加載速度快、方便使用的特點(diǎn)。

本文研究的Three.js技術(shù)主要包含在Web端進(jìn)行3D場(chǎng)景渲染和對(duì)3D模型的一些動(dòng)作行為操作（如漫游、定位、閃爍、高亮等動(dòng)作行為）。Three.js框架主要由渲染3D的場(chǎng)景（Scene）、攝像機(jī)（Camera）、光源（Light）、渲染器（WebGLRenderer）、控制器（Control）等基本組件組成。場(chǎng)景是一個(gè)對(duì)應(yīng)的空間，所有物體的容器，所需要的模型、光源和圖文標(biāo)注等都必須通過(guò)Add方法添加到場(chǎng)景。攝像機(jī)是三維世界中的觀察者，分為透視投影攝像機(jī)和正交投影攝像機(jī)，主要起到模擬人員觀察瀏覽作用。光源對(duì)應(yīng)的是現(xiàn)實(shí)環(huán)境中的各種光，如環(huán)境光、平行光、點(diǎn)光、聚光等，如果沒(méi)有光源，就不可能看到任何渲染結(jié)果。渲染器是將導(dǎo)入的三維模型、設(shè)置好的光源等在相機(jī)設(shè)定好的角度、遠(yuǎn)近可視范圍內(nèi)，通過(guò)渲染函數(shù)渲染成真實(shí)物體并以平面形式顯現(xiàn)出來(lái)。控制器可通過(guò)鍵盤、鼠標(biāo)控制相機(jī)的移動(dòng)。

3 WebGL技術(shù)實(shí)現(xiàn)

在進(jìn)行Three.js開(kāi)發(fā)前，需要通過(guò)3DMax導(dǎo)出obj格式模型和mtl材質(zhì)文件，注意mtl文件中的亂碼和貼圖路徑，通過(guò)Three.js技術(shù)進(jìn)行開(kāi)發(fā)時(shí)，需要按以下流程進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)：

步驟1：下載Three.js文件庫(kù)并引入Three.js庫(kù)及相關(guān)js庫(kù)。

步驟2：在對(duì)應(yīng)的HTML頁(yè)面上添加canvas標(biāo)簽。

步驟3：創(chuàng)建場(chǎng)景并在場(chǎng)景中初始化和加載相應(yīng)的關(guān)聯(lián)因素。

關(guān)聯(lián)因素包含：設(shè)置相機(jī)的遠(yuǎn)近可視范圍及相機(jī)在整個(gè)3D環(huán)境中的位置和焦點(diǎn)位置;設(shè)置光源的類型，光源顏色和強(qiáng)度;創(chuàng)建模型加載器加載模型并設(shè)置模型的大小、位置和材質(zhì);加載標(biāo)注，通過(guò)創(chuàng)建精靈創(chuàng)建標(biāo)注模型，設(shè)置標(biāo)注的材質(zhì)紋理貼圖、模型大小和位置;創(chuàng)建渲染器對(duì)象設(shè)置渲染方式、渲染區(qū)域尺寸及背景顏色等;設(shè)置控制器，使模型可以放大縮小移動(dòng)。

步驟4：將場(chǎng)景和相機(jī)加載到渲染器執(zhí)行渲染操作。

步驟5：對(duì)模型中各種設(shè)備對(duì)象的動(dòng)作行為和交互功能的操作，如實(shí)時(shí)報(bào)警、定點(diǎn)定位和三維漫游等功能。

4 安防BIM模型在Web端的可視化應(yīng)用

在軌道交通綜合安防系統(tǒng)中，通過(guò)BIM模型在客戶端Web瀏覽器的可視化展示、信息查詢，能夠更加直觀地了解模型信息和各個(gè)設(shè)備模型安裝的具體位置，方便監(jiān)控人員對(duì)各個(gè)設(shè)置的實(shí)時(shí)監(jiān)控，通過(guò)觸發(fā)系統(tǒng)的實(shí)時(shí)報(bào)警、精準(zhǔn)定位等技術(shù)實(shí)現(xiàn)系統(tǒng)的精確化、智能化，實(shí)現(xiàn)了系統(tǒng)管理的更加高效管理，大大提高了模型遠(yuǎn)程可視化管理。

系統(tǒng)模型采用3DMax建模，導(dǎo)出obj格式文件，通過(guò)Three.js技術(shù)初始化場(chǎng)景，obj加載器加載模型，設(shè)置相機(jī)、光源及渲染器等，最終通過(guò)Web瀏覽器進(jìn)行可視化渲染，模型在Web端渲染結(jié)果如圖1所示。

模型操作：

用戶可以通過(guò)鼠標(biāo)左右鍵及滾輪實(shí)現(xiàn)模型的旋轉(zhuǎn)、平移及縮放，如圖2所示。

點(diǎn)擊模型中的設(shè)備，設(shè)備高亮顯示并彈出設(shè)備詳情信息，如圖3所示。

模型設(shè)備定位，通過(guò)調(diào)用定位接口，模型相機(jī)直接定位到指定的設(shè)備位置，查看了解設(shè)備的詳情信息，如圖4所示。

模型漫游飛行，相機(jī)會(huì)按第一人稱視角根據(jù)指定的路線進(jìn)行漫游飛行，對(duì)整個(gè)模型路線進(jìn)行巡查，可以查看模型中的各個(gè)設(shè)備位置設(shè)計(jì)是否合理等。

模型報(bào)警，如在現(xiàn)場(chǎng)有人非法闖入觸發(fā)紅外報(bào)警等，系統(tǒng)通過(guò)調(diào)用報(bào)警接口直接定位到觸發(fā)點(diǎn)的位置，并對(duì)報(bào)警設(shè)備進(jìn)行高亮閃爍，如圖5所示。

5 結(jié)論

隨著技術(shù)的不斷發(fā)展，對(duì)WebGL技術(shù)的要求會(huì)越來(lái)越高，技術(shù)研究將引發(fā)更多人的參與，對(duì)BIM模型可視化的技術(shù)的研究方法也會(huì)越來(lái)越多，通過(guò)對(duì)BIM模型的可視化呈現(xiàn)，工作人員可以在Web端直觀了解模型信息，各個(gè)設(shè)備的安裝布置信息，對(duì)設(shè)備進(jìn)行可視化實(shí)時(shí)監(jiān)控，實(shí)現(xiàn)高效智能管理。

【參考文獻(xiàn)】

【1】晁陽(yáng)，牛志偉，齊慧君.基于WebGL的BIM模型可視化研究[J].水電能源科學(xué)，2020，38（09）：79-82.

【2】朱海林，陳登峰，王帥舉.基于WebGL的BIM模型三維可視化技術(shù)研究[J].科技風(fēng)，2019（31）：123.

【3】李倩.基于WebGL的3D技術(shù)在網(wǎng)頁(yè)中的運(yùn)用[J].電子測(cè)試，2020（12）：125-126.

【4】聶帥，秦爽，麥文.通過(guò)Three.js引擎加載OBJ模型[J].科學(xué)技術(shù)創(chuàng)新，2019（14）：80-82.