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

1.2 ?Potree.js和Three.js

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

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

1.3 ?Mapbox的使用

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

本文中用到的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（）;//添加標記

Mapmarker.remove（）;//清除標記

2 ?技術(shù)路線

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

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

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

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

2.2 ?三維點云可視化

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

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

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

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

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

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

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

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

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)點云和路徑點有一個坐標（x，y，z）有相對應(yīng)的WGS84坐標（Lon，Lat，H），將（x，y，z）轉(zhuǎn)換為ENU公用的城市局部坐標[10]，轉(zhuǎn)換公式如公式2 ?所示：

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

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

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)換后的空間直角坐標跟（Ref_X，Ref_Y，Ref_Z）坐標相差一個偏移量，將（dx，dy，dz）轉(zhuǎn)換到（Ref_X，Ref_Y，Ref_Z）對應(yīng)的空間直角坐標

Cover_X = Ref_X + dx;

Cover_Y = Ref_Y + dy;

Cover_Z = Ref_Z + dz;

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

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

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

a = 6378137;

b = 6356752.314245179

）

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

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

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

2.4.1 ?加載三維點云

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

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

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

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

2.4.3 ?點云渲染

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

2.4.4 ?點云測量

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

2.4.5 ?OSM地圖加載和位置點顯示

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

new mapboxgl.Marker（el）

.setLngLat（coordinates）

.addTo（button_right_map）;

}

}）;將標記點重新賦新的位置數(shù)據(jù)。

3 ?應(yīng)用實例

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

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

同時有一些輔助的功能，可以右鍵進行點云距離測量、高度測量、面積測量等一些功能。

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

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

（3）漫游位置的縮略圖，紅色的標記點就是此刻漫游的位置，淺藍色的點的位置是相機可以到達的路徑點，這些點都可以進行漫游，如圖13所示。

4 ?結(jié)束語

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

（1）目前只有測量點云的一個功能，沒有太多功能提供給用戶使用，實用性較低。

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

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

參考文獻

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

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

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

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

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

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

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

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

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

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