基于無(wú)插件化的三維室內(nèi)點(diǎn)云可視化系統(tǒng)

整體的div框架如圖1所示。

1.2 ?Potree.js和Three.js

Potree.js是基于三維引擎WebGL進(jìn)行開(kāi)發(fā)的一套激光點(diǎn)云瀏覽、處理、可視化的開(kāi)源庫(kù)。Potree.js是由奧地利維也納理工大學(xué)的Harvest4D項(xiàng)目貢獻(xiàn)。它的優(yōu)勢(shì)在于可以進(jìn)行點(diǎn)云數(shù)據(jù)的轉(zhuǎn)換，比如常見(jiàn)的ply，laz等等。

調(diào)用Camera.fov（）;可以改變視野的大小，在三維點(diǎn)云中的效果就是放大或者縮短距離某一個(gè)方向的距離。

1.3 ?Mapbox的使用

伴隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，人們對(duì)位置服務(wù)的需求日趨增長(zhǎng)。近年來(lái)網(wǎng)絡(luò)地圖模式成為人們出行的必備。國(guó)內(nèi)常用的網(wǎng)絡(luò)地圖有百度地圖、高德地圖、騰訊地圖、天地圖等等。但是這些地圖提供出的API比較受限制，同時(shí)縮放級(jí)別zoom比較小，不符合縮略圖的要求。Mapbox提供的地圖是OSM的，它是一個(gè)開(kāi)源免費(fèi)的地圖，同時(shí)縮放級(jí)別比較高，滿足縮略圖的需求。OSM地圖加載方式很簡(jiǎn)單，在Mapbox注冊(cè)一個(gè)賬號(hào)，拿到秘鑰就可以加載一副直接地圖。當(dāng)然想實(shí)現(xiàn)其他的一些功能，需要調(diào)用API來(lái)完成。

本文中用到的API有

button_right_map = new mapboxgl.Map（{

container： 'Map_Navigation'，

style： 'mapbox：//styles/ mapbox/streets-v9'，

center： [114.354847195187， 30.5294068646091]，

zoom： 19

}）; //顯示地圖

new mapboxgl.Marker（）;//添加標(biāo)記

Mapmarker.remove（）;//清除標(biāo)記

2 ?技術(shù)路線

2.1 ?三維點(diǎn)云數(shù)據(jù)處理

激光掃描儀在室內(nèi)掃描數(shù)據(jù)，掃描數(shù)據(jù)的原理是計(jì)算發(fā)射和接收信號(hào)的時(shí)間，計(jì)算位置，根據(jù)發(fā)射角，從而得到掃描位置的位置坐標(biāo)。在采集數(shù)據(jù)的過(guò)程中，由于透明材質(zhì)或者吸收能力強(qiáng)反射能力弱的材質(zhì)，比如玻璃或者透明的擋板都會(huì)影響激光雷達(dá)數(shù)據(jù)的采集。最后得到的點(diǎn)云數(shù)據(jù)有兩種錯(cuò)誤類型的數(shù)據(jù)：（1）離散點(diǎn)，這些點(diǎn)發(fā)散在主體點(diǎn)云附近，或者遠(yuǎn)離主體點(diǎn)云，這些點(diǎn)是由于激光沒(méi)有完全發(fā)生造成能量波的損失，從而得到了錯(cuò)誤的數(shù)據(jù)。（2）噪聲點(diǎn)，這些測(cè)量的噪聲信號(hào)受到測(cè)量物體的形狀，物體的材料，光線或者其他環(huán)境因素的影響。這些測(cè)量誤差統(tǒng)稱為噪聲點(diǎn)[5]。

點(diǎn)云數(shù)據(jù)中存在噪聲點(diǎn)和離散點(diǎn)會(huì)影響點(diǎn)云數(shù)據(jù)的應(yīng)用，比如點(diǎn)云和圖像的融合，點(diǎn)云特征面、特征線的提取等等。由于噪聲的存在，會(huì)影響圖像分割的效果[6]。因此，在使用點(diǎn)云之前首先將點(diǎn)云的離散點(diǎn)和噪聲點(diǎn)進(jìn)行去除。去除離散點(diǎn)，首先進(jìn)行離散點(diǎn)的檢測(cè)，常用的檢測(cè)算法是k-鄰域距離搜索，通過(guò)計(jì)算每個(gè)點(diǎn)到附近點(diǎn)的一個(gè)距離的標(biāo)準(zhǔn)差和方差，根據(jù)點(diǎn)云的密度設(shè)置一定的閾值，進(jìn)行多次調(diào)參得到合理的去除離散點(diǎn)的閾值，從而很好地剔除離散點(diǎn)[7]。常用的噪聲點(diǎn)剔除方法是根據(jù)鄰近點(diǎn)的幾何特征，根據(jù)幾何特征屬性進(jìn)行識(shí)別噪聲點(diǎn)。

本文通過(guò)PCL庫(kù)，調(diào)用PCL點(diǎn)云濾波函數(shù)和相關(guān)的API，通過(guò)多次調(diào)參進(jìn)行點(diǎn)云數(shù)據(jù)處理。數(shù)據(jù)處理的流程如圖4所示。

2.2 ?三維點(diǎn)云可視化

單線激光雷達(dá)每秒可以掃描10800個(gè)點(diǎn)，本文中用到的是兩個(gè)單線雷達(dá)，通過(guò)一段時(shí)間的掃描，獲取的點(diǎn)云數(shù)據(jù)量是龐大的。目前點(diǎn)云加載緩慢、可視化效果差是制約激光雷達(dá)發(fā)展的瓶頸之一。龐大的點(diǎn)云數(shù)據(jù)量只有建立了一種拓?fù)潢P(guān)系和數(shù)據(jù)組織結(jié)構(gòu)，通過(guò)檢索的方式加載子節(jié)點(diǎn)、葉節(jié)點(diǎn)，通過(guò)子節(jié)點(diǎn)和葉節(jié)點(diǎn)不斷地加載父節(jié)點(diǎn)，達(dá)到一種異步加載點(diǎn)云的效果。

目前建立三維點(diǎn)云數(shù)據(jù)結(jié)構(gòu)比較成熟的算法有八叉樹(shù)、四叉樹(shù)、KR樹(shù)等等，本文中用到的是八叉樹(shù)算法。室內(nèi)三維激光掃描儀在室內(nèi)掃描之后，得到的點(diǎn)云數(shù)據(jù)往往有很多不規(guī)則的物體，比如沙發(fā)、被子、椅子等等，獲取的每個(gè)點(diǎn)都具有（x，y，z）三維信息，信息量龐大。八叉樹(shù)數(shù)據(jù)結(jié)構(gòu)模型對(duì)于體狀目標(biāo)物數(shù)據(jù)的管理具有獨(dú)到的優(yōu)勢(shì)[8]。比較以上算法，八叉樹(shù)可以更高效率地將點(diǎn)云數(shù)據(jù)進(jìn)行結(jié)構(gòu)化，建立相關(guān)的檢索和索引方式。

2.3 ?局部坐標(biāo)轉(zhuǎn)WGS84坐標(biāo)

局部坐標(biāo)系（Local Coordinate），是坐標(biāo)系以物體的中心為坐標(biāo)原點(diǎn)，同時(shí)物體的旋轉(zhuǎn)、平移等操作都是圍繞局部坐標(biāo)系進(jìn)行的，這時(shí)，當(dāng)物體模型進(jìn)行旋轉(zhuǎn)或平移等操作時(shí)，局部坐標(biāo)系也執(zhí)行相應(yīng)的旋轉(zhuǎn)或平移操作[9]。

WGS84：World Geodetic System 1984，是為GPS全球定位系統(tǒng)使用而建立的坐標(biāo)系統(tǒng)。

本篇文章采用的是橢球參數(shù)為：a=6378137，b= 6356752.314245179， ，具體的轉(zhuǎn)換過(guò)程和思路框架如圖5所示。

具體每一步對(duì)應(yīng)的坐標(biāo)轉(zhuǎn)換公式，首先將局部坐標(biāo)已知點(diǎn)的WGS84坐標(biāo)（Lon，Lat，H）轉(zhuǎn)換為空間直角坐標(biāo)，具體公式如公式1：

公式1. WGS84轉(zhuǎn)空間直角坐標(biāo)公式如下：

Ref_X = （N+H）*cos（Lon）*cos（Lat）

Ref_Y = （N+H）*cos（Lon）*sin（Lat）

Ref_Z = [N*（1- ）+H]*sin（Lon）

室內(nèi)點(diǎn)云和路徑點(diǎn)有一個(gè)坐標(biāo)（x，y，z）有相對(duì)應(yīng)的WGS84坐標(biāo)（Lon，Lat，H），將（x，y，z）轉(zhuǎn)換為ENU公用的城市局部坐標(biāo)[10]，轉(zhuǎn)換公式如公式2 ?所示：

公式2. 局部坐標(biāo)系轉(zhuǎn)旋轉(zhuǎn)Angle之后的ENU坐標(biāo)：

公式3. ENU坐標(biāo)轉(zhuǎn)WGS84空間直角坐標(biāo)

dx = -sin（Lon）*X0-sin（Lat）*cos（Lon）*Y0+cos（Lat）* cos（lon） * Z0;

dy = cos（Lon）*X0-sin（Lon）*Y0+cos（Lat）* sin（lon） * Z0;

dz = cos（Lat） * Y0 +sin（Lat） * Z0;

公式4. 轉(zhuǎn)換后的空間直角坐標(biāo)跟（Ref_X，Ref_Y，Ref_Z）坐標(biāo)相差一個(gè)偏移量，將（dx，dy，dz）轉(zhuǎn)換到（Ref_X，Ref_Y，Ref_Z）對(duì)應(yīng)的空間直角坐標(biāo)

Cover_X = Ref_X + dx;

Cover_Y = Ref_Y + dy;

Cover_Z = Ref_Z + dz;

得到相對(duì)坐標(biāo)系下坐標(biāo)（x，y，z）與之對(duì)應(yīng)的空間直角坐標(biāo)系，因此通過(guò)空間之間坐標(biāo)可以反算求出與之對(duì)應(yīng)的WGS84坐標(biāo)，這樣相對(duì)坐標(biāo)就轉(zhuǎn)換為WGS84坐標(biāo)，具體公式如公式5所示：

公式5. 空間之間坐標(biāo)轉(zhuǎn)換為WGS84坐標(biāo)，公式如下：

計(jì)算所需要的參數(shù)：

a = 6378137;

b = 6356752.314245179

）

2.4 ?三維室內(nèi)點(diǎn)云漫游的構(gòu)建

構(gòu)建一個(gè)室內(nèi)三維點(diǎn)云漫游系統(tǒng)需要以下必須的構(gòu)件：基于HTML的場(chǎng)景容器、Three.js 提供場(chǎng)景（scene）、相機(jī)（camera）、渲染（render）、鼠標(biāo)監(jiān)聽(tīng)事件。

基于上述的技術(shù)路線和方法，構(gòu)建三維室內(nèi)點(diǎn)云漫游系統(tǒng)。主要框架是基于HTML5提供的標(biāo)簽和。Body下包含三個(gè)容器，有工具搜索容器、OSM地圖容器、場(chǎng)景渲染容器。head主要添加系統(tǒng)中所用到的js庫(kù)，主要的庫(kù)有Three.js和Potree.js以及其他一些常用的js庫(kù)。系統(tǒng)中用到的一些api和函數(shù)都是基于head所引用的js。工具容器的作用是對(duì)點(diǎn)云場(chǎng)景進(jìn)行一些功能操作，包括鼠標(biāo)右鍵調(diào)用點(diǎn)云測(cè)量功能以及對(duì)點(diǎn)云一些屬性的控制，有點(diǎn)云大?。╯ize）、點(diǎn)云透明度（opciaty）、點(diǎn)云渲染方式等等一些功能。OSM地圖容器包含地圖的點(diǎn)擊事件以及點(diǎn)云漫游路徑點(diǎn)的加載。場(chǎng)景容器主要用來(lái)渲染三維室內(nèi)點(diǎn)云，加載各種渲染的效果，同時(shí)加載漫游的路徑點(diǎn)，通過(guò)點(diǎn)擊路徑點(diǎn)可以進(jìn)行漫游?？傮w的框架如圖6所示。

2.4.1 ?加載三維點(diǎn)云

場(chǎng)景加載三維點(diǎn)云的數(shù)據(jù)是通過(guò)室內(nèi)移動(dòng)掃描儀器獲得的，將點(diǎn)云數(shù)據(jù)進(jìn)行預(yù)處理，處理的方法和算法在點(diǎn)云處理小節(jié)有詳細(xì)的介紹。本文主要將處理之后的點(diǎn)云數(shù)據(jù)通過(guò)Potree-contoner進(jìn)行轉(zhuǎn)換成很多bin文件，這些bin文件之間通過(guò)八叉樹(shù)建立了索引關(guān)系和子父級(jí)關(guān)系。通過(guò)調(diào)用potree.load（）加載點(diǎn)云文件，由于點(diǎn)云文件比較大，同時(shí)加載所

有點(diǎn)云數(shù)據(jù)，耗時(shí)長(zhǎng)且對(duì)電腦的內(nèi)存占用量大。該系統(tǒng)的方法是通過(guò)加載每個(gè)節(jié)點(diǎn)的父級(jí)數(shù)據(jù)，進(jìn)行初步地加載，同時(shí)識(shí)別相機(jī)的視角方向和位置，從而進(jìn)行局部加載點(diǎn)云數(shù)據(jù)，不至于大數(shù)據(jù)點(diǎn)云造成系統(tǒng)崩潰。

2.4.2 ?漫游瀏覽效果設(shè)計(jì)

通過(guò)調(diào)用Three.js中PerspectiveCamera達(dá)到人眼看世界的視覺(jué)效果。PerspectiveCamera有位置屬性、視場(chǎng)角屬性，獲取路徑點(diǎn)的位置信息，將位置信息賦予相機(jī)位置屬性達(dá)到在點(diǎn)云中漫游瀏覽的視覺(jué)效果。Js函數(shù)中有監(jiān)聽(tīng)鼠標(biāo)左右鍵點(diǎn)擊以及鼠標(biāo)滑輪正反滑動(dòng)事件，通過(guò)監(jiān)聽(tīng)鼠標(biāo)滑輪滑動(dòng)事件panocontainer.addEventListener（'wheel'，_fn_onDocu-mentMouseWheel）;達(dá)到場(chǎng)景縮放的效果，具體的做法是通過(guò)var delta = Math.max（-1， Math.min（1， （e.wheelDelta || -e.detail）））;var camerawheel_fov = Math.max（10， Math.min（100， camerafov - （5 * delta）））;將所算的滑輪值賦給相機(jī)視場(chǎng)角，改變相機(jī)視場(chǎng)角。

2.4.3 ?點(diǎn)云渲染

采集的原始點(diǎn)云數(shù)據(jù)具有x，y，z信息和r，g，b值，渲染的點(diǎn)云是假彩色。選用不同的功能選項(xiàng)可以用不同的渲染方法進(jìn)行渲染得到不同的點(diǎn)云視覺(jué)效果。高度渲染是根據(jù)點(diǎn)云Z的值渲染點(diǎn)云，根據(jù)不同的高度賦予不同的顏色，可以從整體看出高差信息。選用純色渲染，調(diào)用HTML的標(biāo)簽可以任意選取顏色，將選取的RGB值賦予整體點(diǎn)云得到純色點(diǎn)云效果。改變點(diǎn)云的大?。╯ize）和透明度（opciaty），根據(jù)用戶的瀏覽體驗(yàn)來(lái)調(diào)節(jié)點(diǎn)云的大小和明亮度。

2.4.4 ?點(diǎn)云測(cè)量

三維點(diǎn)云點(diǎn)之間的相對(duì)位置比較準(zhǔn)確，通過(guò)鼠標(biāo)獲取旋轉(zhuǎn)的三維點(diǎn)的坐標(biāo)值可以進(jìn)行測(cè)量?jī)牲c(diǎn)間的水平距離和高差值，更好地利用點(diǎn)云數(shù)據(jù)。為了增強(qiáng)用戶的使用體驗(yàn)，將距離測(cè)量、高度測(cè)量、面積測(cè)量等一些測(cè)量功能通過(guò)右鍵菜單選項(xiàng)進(jìn)行調(diào)用。

2.4.5 ?OSM地圖加載和位置點(diǎn)顯示

OSM地圖是開(kāi)源地圖數(shù)集，注冊(cè)Mapbox之后得到密鑰即可以使用。通過(guò)在OSM地圖上粗略地獲取點(diǎn)云數(shù)據(jù)集的地圖經(jīng)緯度，在加載地圖時(shí)直接顯示。通過(guò)第二節(jié)描述的相對(duì)坐標(biāo)和wgs84坐標(biāo)相互轉(zhuǎn)換，將漫游路徑點(diǎn)的相對(duì)位置通過(guò)轉(zhuǎn)換公式轉(zhuǎn)換為wgs84坐標(biāo)，每次點(diǎn)擊路徑點(diǎn)之后，重新調(diào)用

new mapboxgl.Marker（el）

.setLngLat（coordinates）

.addTo（button_right_map）;

}

}）;將標(biāo)記點(diǎn)重新賦新的位置數(shù)據(jù)。

3 ?應(yīng)用實(shí)例

本文所用的數(shù)據(jù)是實(shí)驗(yàn)室的室內(nèi)三維點(diǎn)云數(shù)據(jù)，選用subline Text3 作為代碼編輯器，結(jié)合Three.js、Mapbox以及Potree.js搭建三維可視化平臺(tái)。所構(gòu)建的可視化軟件主要包括點(diǎn)云局部加載和渲染、縮略圖、點(diǎn)云測(cè)量、點(diǎn)云模塊控制。首先通過(guò)Potree-contoner將可視化的點(diǎn)云進(jìn)行八叉樹(shù)分割，每個(gè)文件夾里都有分割出來(lái)的bin文件，將分割的很多bin文件當(dāng)成已知數(shù)據(jù)進(jìn)行加載，如圖7所示。

通過(guò)Potree.loadPointcloud（）;加載點(diǎn)云數(shù)據(jù)，通過(guò)上文綜述的構(gòu)建方法搭建web前端，構(gòu)建的三維可視化瀏覽器可以支持常用的瀏覽器，包括Firefox、360快速瀏覽器、chrome，IE瀏覽器。加載的點(diǎn)云效果如圖8所示。

同時(shí)有一些輔助的功能，可以右鍵進(jìn)行點(diǎn)云距離測(cè)量、高度測(cè)量、面積測(cè)量等一些功能。

（1）距離測(cè)量，調(diào)用Three.js的碰撞事件，獲取鼠標(biāo)碰撞點(diǎn)云的坐標(biāo)值，進(jìn)行距離測(cè)量、高度測(cè)量、面積測(cè)量。

（2）還有一些渲染點(diǎn)云的功能以及對(duì)點(diǎn)云材質(zhì)屬性進(jìn)行設(shè)置，比如點(diǎn)云的大小、點(diǎn)云的透明度，點(diǎn)云渲染的形狀。

（3）漫游位置的縮略圖，紅色的標(biāo)記點(diǎn)就是此刻漫游的位置，淺藍(lán)色的點(diǎn)的位置是相機(jī)可以到達(dá)的路徑點(diǎn)，這些點(diǎn)都可以進(jìn)行漫游，如圖13所示。

4 ?結(jié)束語(yǔ)

本文介紹了一種基于potree.js和Three.js的無(wú)插件化的三維室內(nèi)點(diǎn)云瀏覽軟件。通過(guò)Potree-contoner將處理之后的點(diǎn)云數(shù)據(jù)進(jìn)行分割，這樣可以解決大數(shù)據(jù)集的點(diǎn)云加載卡頓問(wèn)題。同時(shí)該軟件也有很多的不足之處，因?yàn)檠芯康臅r(shí)間有限，需要進(jìn)一步研究的問(wèn)題有以下幾點(diǎn)：

（1）目前只有測(cè)量點(diǎn)云的一個(gè)功能，沒(méi)有太多功能提供給用戶使用，實(shí)用性較低。

（2）后期可以引入興趣點(diǎn)這一概念，增加點(diǎn)云瀏覽的可檢索性。

（3）mapbox的縮略圖沒(méi)有添加室內(nèi)點(diǎn)云的平面圖，位置標(biāo)記不明確，后期考慮加上平面圖，增加可讀性。

參考文獻(xiàn)

[1] 楊書(shū)哲. 基于三維激光掃描技術(shù)的校園可視化[J]. 資源信息與工程， 2017（06）： 140-141.

[2] 王磊， 郭清菊， 姜晗. 基于改進(jìn)的八叉樹(shù)索引與分層渲染的海量激光點(diǎn)云可視化技術(shù)[J]. 軟件， 2016， 37（3）： 114- 117.

[3] 王連杰， 韋群. 三維云圖仿真系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件， 2018， 39（5）： 151-155.

[4] 葉夢(mèng)軒， 危雙豐， 張冬梅. 基于 HTML5 和 WebGL 的三維點(diǎn)云可視化方法[J]. 工程勘察， 2017（1）： 40-44.

[5] 薛萍， 姚娟， 鄒學(xué)洲， 王宏民. 基于法矢修正的點(diǎn)云數(shù)據(jù)去噪平滑算法[J]. 哈爾濱理工大學(xué)學(xué)報(bào)， 2018， 23（05）： 86-91.

[6] 李慧霞， 高梓豪. 室內(nèi)智能移動(dòng)機(jī)器人規(guī)則物體識(shí)別與抓取[J]. 軟件， 2016， 37（02）： 89-92.

[7] 曹妍， 陳偉， 徐森. 圖像去噪方法研究與仿真[J]. 軟件， 2015， 36（4）： 33-36.

[8] 徐旭東， 李澤. 三維激光點(diǎn)云數(shù)據(jù)的可視化研究[J]. 計(jì)算機(jī)科學(xué)， 2016， 43（S1）： 175-178.

[9] 張克敏. 基于虛擬現(xiàn)實(shí)的機(jī)器人仿真研究[D]. 重慶： 重慶大學(xué)， 2012.

[10] 朱玲， 于穎， 張寶泉， 等. 小車尋跡過(guò)程的虛擬實(shí)現(xiàn)[J]. 軟件， 2015， 36（7）： 5-9.