基于Three.js構(gòu)建小場景三維地理信息系統(tǒng)的關(guān)鍵技術(shù)研究

肖現(xiàn)臣

(濟南市勘察測繪研究院，山東 濟南 250101)

1 引 言

近年來，智慧城市、數(shù)字孿生城市是數(shù)字化城市建設(shè)的熱點，隨著應(yīng)用與研究的進展，誕生了許多數(shù)字化城市系統(tǒng)，為城市基礎(chǔ)設(shè)施查詢、分析、顯示和管理提供了極大便利，同時進一步促進了數(shù)字城市理論的發(fā)展[1]。

在數(shù)字化城市建立的過程中，GIS與BIM技術(shù)發(fā)揮了極為重要的作用[2]。對于城市級、規(guī)劃片區(qū)級的大場景三維數(shù)字城市的建設(shè)，目前技術(shù)比較成熟，可選的基礎(chǔ)技術(shù)方案有ArcGIS API for JavaScript 4.X系列、Cesium等[3]，且都具有各自的技術(shù)生態(tài)鏈，提供系統(tǒng)構(gòu)建各環(huán)節(jié)的技術(shù)支持。而GIS與BIM在城市細(xì)部空間的應(yīng)用，即關(guān)注點在小型園區(qū)、工廠、加油站、泵站等較小范圍的小場景三維地理信息系統(tǒng)，作為大場景數(shù)字化城市系統(tǒng)的補充，能夠關(guān)注到更多、更細(xì)粒度的研究內(nèi)容，是建設(shè)數(shù)字孿生城市不可或缺的一部分。

本文研究了如何基于Three.js框架搭建小場景三維地理信息系統(tǒng)，并對實踐過程中形成的關(guān)鍵技術(shù)進行闡述。

2 Three.js簡介

Three.js是一個開源JavaScript三維渲染引擎，它對WebGL進行封裝的同時不損失其靈活性，并提供了易于使用的開發(fā)接口，讓前端開發(fā)人員在不需要掌握很多數(shù)學(xué)和圖形學(xué)知識的情況下，也能夠輕松在瀏覽器端進行三維應(yīng)用的研發(fā)，不但降低了門檻，也大大提升了效率。同時，Three.js的開源特性，讓基于Three.js構(gòu)建的三維應(yīng)用可免費用于商業(yè)和非商業(yè)用途，減少項目成本。

選取Three.js搭建小場景三維地理信息系統(tǒng)的另一個優(yōu)點是它對多類模型的支持能力，Three.js支持obj、glTF、3ds max、FBX、Collada、Babylon、draco等眾多三維模型格式，可最大可能將現(xiàn)有三維模型數(shù)據(jù)運用到建設(shè)項目，無須重復(fù)建模，減少工作量和成本。

Three.js作為對WebGL的封裝，具有簡單易用的特點。使用Three.js的場景(scene)、相機(camera)、渲染器(renderer)三大組件即可完成初始化。初始化后，便可進行模型加載及上層應(yīng)用的開發(fā)。

3 數(shù)據(jù)組織形式設(shè)計

數(shù)據(jù)是地理信息系統(tǒng)的基礎(chǔ)，本研究將涉及的數(shù)據(jù)劃分為模型數(shù)據(jù)和屬性數(shù)據(jù)兩類。

模型數(shù)據(jù)主要存儲的是模型的空間幾何信息和必要的屬性信息(如模型名稱、唯一標(biāo)識ID等)。對于模型數(shù)據(jù)的組織，參考具體模型的格式以文件、模型服務(wù)的兩種形式進行組織，如obj格式模型以文件組織、glTF模型發(fā)布為數(shù)據(jù)服務(wù)，Three.js對此兩種形式均提供了支持，通過其loader機制可以方便地實現(xiàn)模型的連接、加載。

屬性數(shù)據(jù)存儲的是模型豐富的社會經(jīng)濟屬性、掛接附件等信息，以傳統(tǒng)關(guān)系型數(shù)據(jù)庫進行存儲，如Microsoft SQL Server，并通過模型的唯一標(biāo)識與模型建立關(guān)聯(lián)。屬性數(shù)據(jù)在基于Three.js的三維地理信息系統(tǒng)中通過搭建后臺服務(wù)、前端發(fā)起AJAX請求的方式進行獲取。

4 關(guān)鍵技術(shù)研究與實踐

4.1 坐標(biāo)系統(tǒng)與模型定位

由于Three.js將繪圖中心作為坐標(biāo)系統(tǒng)原點即(0，0，0)[4]，且場景操控的中心點也默認(rèn)是原點，這樣做的優(yōu)點是方便增加其他輔助模型或部件。因此，為了將地理實體模型放置在原點附近展示，需要建立模型自身地理坐標(biāo)系到Three.js坐標(biāo)系統(tǒng)的映射機制。

而小場景的模型、部件往往是分開建模、多文件存儲的，為保證多個模型的相對位置關(guān)系正確，我們做了如下處理：

(1)以加載的第一個地理實體模型的中心點作為基準(zhǔn)，將該模型的中心點映射到Three.js坐標(biāo)系統(tǒng)的原點，將該模型偏移、放置到映射后的位置。這樣就建立了模型坐標(biāo)與Three.js坐標(biāo)系的映射。

(2)由于地理實體模型都具有相同的參考系，后續(xù)加載的模型，以此映射進行坐標(biāo)偏移、定位放置，即可確保地理實體模型之間正確的相對位置關(guān)系。

4.2 三維模型加載與圖層化管理

(1)模型加載

前文提到Three.js對多種格式的三維模型提供了支持，同時其也提供了接口一致的加載方式，即loader機制，如通過OBJLoader加載obj模型、通過GLTFLoader加載glTF模型等，使得模型的加載非常容易。

(2)模型圖層化管理

對地理數(shù)據(jù)進行分層加載并圖層化管理，是地理信息系統(tǒng)常用的數(shù)據(jù)管理思路，如圖1所示。

圖1 模型圖層化管理

在Three.js中，并沒有地理圖層的概念和機制，但是提供了圖層對象Layers和模型圖層屬性layers，圖層對象Layers可用于控制可見性，通過Three.js渲染器渲染場景的時候，場景中的模型圖層屬性layers必須和相機的圖層屬性layers一致，模型才會被渲染出來。因此，可借助圖層對象Layers和模型圖層屬性layers實現(xiàn)地理信息系統(tǒng)的圖層管理機制。實現(xiàn)方法如下：

①模型加載之前創(chuàng)建一個圖層對象Layers。

②模型加載后，將圖層對象Layers賦值給模型的圖層屬性layers，這樣可以通過圖層屬性layers區(qū)分模型所屬圖層。

③圖層顯示與隱藏的控制通過切換相機的圖層屬性來實現(xiàn)，將圖層對象Layers傳入camera.layers.toggle()方法即可。

4.3 模型屬性查詢

對地理實體的屬性進行查詢，是用戶基于空間位置了解地物的社會經(jīng)濟信息的常用操作，也是二三維地理信息系統(tǒng)的一個必備的基礎(chǔ)功能?；赥hree.js搭建小場景三維地理信息應(yīng)用，也可以實現(xiàn)此功能。下面以點選查詢功能的實現(xiàn)為例闡述屬性查詢的相關(guān)技術(shù)。

屬性查詢的關(guān)鍵點在于捕獲地理要素，在Three.js工程中即為捕獲模型，需要用到Raycaster射線類。Raycaster射線類用于鼠標(biāo)去獲取在三維場景中被鼠標(biāo)選中的一些物體。它的使用也非常簡便，步驟如下：

(1)首先，在當(dāng)前Three.js實例所在的窗口對象中綁定鼠標(biāo)click事件onMouseClick。

(2)在click事件中，可以獲取鼠標(biāo)點擊處的坐標(biāo)，根據(jù)此坐標(biāo)和相機位置創(chuàng)建Raycaster實例。

(3)使用Raycaster實例的intersectObjects方法計算捕獲到的地理實體模型。

(4)對捕獲的地理實體通過材質(zhì)做高亮顯示，并通過彈窗展示模型屬性或掛接的外部社會經(jīng)濟屬性信息，模型屬性查詢與高亮顯示如圖2所示。

圖2 模型屬性查詢與高亮顯示

4.4 場景漫游

場景漫游對于三維地理信息系統(tǒng)是一個比較重要的功能，常用的漫游方式有地上地下漫游、室內(nèi)室外漫游、街區(qū)路線漫游等，其原理是通過以一定的時間間隔不斷地切換相機和場景的位置，達(dá)到呈現(xiàn)給用戶的三維視圖平滑過渡的效果。

在Three.js中，通過不斷更新相機的位置和軌跡球控制器(Three.js自帶的場景操控工具)的目標(biāo)朝向可以實現(xiàn)場景的漫游，如圖3所示，其實現(xiàn)流程有以下幾個關(guān)鍵步驟：

圖3 場景漫游的實現(xiàn)流程

(1)路徑規(guī)劃

規(guī)劃漫游路線，并在漫游路線中選取若干初始過程點(具有三維坐標(biāo)的空間點)，為正確還原路線走向，可在路線方向變化較大的區(qū)域，適當(dāng)多選取過程點。

(2)獲取漫游過程點

為實現(xiàn)平滑、順暢的漫游效果，需要對初始過程點進行曲線擬合、過程點重采樣，生成場景漫游中實際使用的過程點。本研究中，通過Three.js提供的THREE.CatmullRomCurve3曲線函數(shù)實現(xiàn)了基于初始過程點擬合三維樣條曲線，并通過曲線按漫游步長進行重采樣，獲取到最終漫游過程點，重采樣形成的過程點越多，漫游效果就越平滑。

(3)漫游實現(xiàn)

通過編程實現(xiàn)場景的漫游，原理是首先將漫游當(dāng)前點設(shè)置到第一個過程點：通過改變相機位置將Three.js的場景中心位置移動到第一個過程點，并通過當(dāng)前點與下一個過程點的兩個坐標(biāo)計算漫游方向，以此設(shè)置軌跡球控制器的朝向。然后按照時間間隔將當(dāng)前點設(shè)定到下一個過程點，時間間隔可按設(shè)定的速率和兩點之間的距離進行計算。依次移動當(dāng)前點到下一個過程點，完成場景的漫游。

為優(yōu)化漫游效果，減少開發(fā)難度，本研究采用了第三方動畫工具TWEEN.js，通過TWEEN.js自動增加補間動畫使漫游更加平滑、順暢。

4.5 重點區(qū)域標(biāo)注效果

小場景地理信息應(yīng)用往往在加載重點關(guān)注區(qū)域的同時，也會加載一定緩沖區(qū)范圍內(nèi)的地形、建筑、道路網(wǎng)等地理要素，一是為了襯托場景，不至于太單調(diào)，二是為了區(qū)分場景的位置，便于了解周邊地物等。周邊地理要素加載后，如何突出重點研究區(qū)域是小場景要解決的一個問題，重點區(qū)域標(biāo)注是常用的方法。

Three.js中的標(biāo)注方法有多種，本文就實現(xiàn)思路和優(yōu)缺點進行簡要闡述。實現(xiàn)標(biāo)注有以下幾種方法：

(1)傳統(tǒng)HTML元素實現(xiàn)，使用DOM繪制元素、CSS設(shè)置樣式。優(yōu)點是實現(xiàn)簡單，缺點是與場景結(jié)合的效果不好。

(2)使用Three.js的文字對象，并可結(jié)合文字貼圖THREE.TextGeometry進行美化。優(yōu)點是實現(xiàn)簡單，效果與場景同步；缺點是設(shè)置顏色和動畫復(fù)雜，耗費資源大。

(3)使用Three.Sprite精靈，不但支持加載圖片，還可以通過canvas繪制圖形和文字。優(yōu)點是文字效果豐富，方便繪制，尤其對于熟悉canvas編程的人員學(xué)習(xí)成本較少。缺點是生成后，分辨率固定，放大后會產(chǎn)生失真。

(4)使用底層著色器接口實現(xiàn)。優(yōu)點是可較自由地定制開關(guān)、顏色、材質(zhì)、動畫，效果豐富，與場景結(jié)合最好。缺點是學(xué)習(xí)成本很高。

具體項目應(yīng)用中，可根據(jù)實際需求，通過以上多種方法的結(jié)合實現(xiàn)標(biāo)注效果，如圖4所示。

圖4 通過著色器和Three.Sprite實現(xiàn)的重點區(qū)域標(biāo)注(棱錐、文字框)

4.6 常用特效

酷炫的動畫、流光特效，不但可以讓三維場景運動起來，還能營造強烈的視覺沖擊，給人留下深刻的印象。本節(jié)介紹幾個常用特效的實現(xiàn)技術(shù)。

(1)線狀地物流光效果

線狀地物流光效果常用于道路、地下管道等地理實體，用于突出流動效果，本文基于紋理偏移機制實現(xiàn)了道路的流光效果(圖5)，實現(xiàn)關(guān)鍵技術(shù)如下：

圖5 道路流光效果

①首先準(zhǔn)備一張流光紋理圖片，圖片為線狀需包含高光部分、暗色部分，才能做出流動的效果。

②使用THREE.TextureLoader加載圖片為紋理，并設(shè)置屬性wrapS、wrapT為THREE.RepeatWrapping意為可重復(fù)，設(shè)置needsUpdate為true意為需要更新。

③新建材質(zhì)，將紋理作為貼圖賦值給材質(zhì)。

④將材質(zhì)賦給道路(線狀地物)，在幀動畫中不斷改變紋理的偏移值(如texture.offset.x+=0.02)，即可實現(xiàn)流光效果。

(2)建筑物線框模式

建筑物線框模式指的是隱藏建筑物的表面細(xì)節(jié)，僅展示建筑物的輪廓線，可以達(dá)到精簡界面烘托重點的作用。

本文實現(xiàn)建筑物線框的思路是通過THREE.EdgesGeometry方法提取建筑物模型的邊線，然后通過THREE.LineSegments構(gòu)造線條對象，并應(yīng)用線狀材質(zhì)，到達(dá)線框模型的效果，如圖6所示。

圖6 線框模式實現(xiàn)效果

(3)后處理特效

三維地理信息系統(tǒng)的構(gòu)建，對界面或模型進行調(diào)光、調(diào)色是必不可少的，Three.js提供了許多的后期處理通道，不但可以減少對復(fù)雜的著色器的使用，還能實現(xiàn)功能強大的光效設(shè)置，如輝光、邊緣泛光、抗鋸齒等，后處理特效可以通過THREE.EffectComposer組合器組合使用，給小場景三維地理信息系統(tǒng)建設(shè)提供了豐富的效果支持。

5 總 結(jié)

本文探索了基于Three.js三維渲染引擎構(gòu)建小場景三維地理信息系統(tǒng)的技術(shù)路線，并研究了在Three.js框架下實現(xiàn)地理模型加載、圖層化管理、屬性查詢、場景漫游、模型特效處理等關(guān)鍵功能的相關(guān)技術(shù)，為構(gòu)建智慧城市、智慧園區(qū)等小場景應(yīng)用鋪平了道路。

研究表明，基于Three.js構(gòu)建小場景三維地理信息系統(tǒng)的技術(shù)思路是可行的，Three.js對于模型加載與管理、系統(tǒng)功能建設(shè)、特效處理等的支持是豐富的、易用的，相比其他方案具有框架開源節(jié)約成本、兼容模型格式多、開發(fā)友好、特效豐富、易于集成等獨特優(yōu)勢，這些都有助于Three.js在三維地理信息系統(tǒng)構(gòu)建中進一步推廣應(yīng)用。

BIM技術(shù)與GIS技術(shù)的結(jié)合應(yīng)用，已經(jīng)成為一種勢在必行的趨勢[5]，相信基于Three.js的小場景三維地理信息系統(tǒng)建設(shè)方案將會在未來智慧城市、數(shù)字孿生城市的建設(shè)中得到更多的應(yīng)用和發(fā)展。