基于無插件化的三維室內點云可視化系統

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

1.2 ?Potree.js和Three.js

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

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

1.3 ?Mapbox的使用

伴隨著互聯網技術的發展，人們對位置服務的需求日趨增長。近年來網絡地圖模式成為人們出行的必備。國內常用的網絡地圖有百度地圖、高德地圖、騰訊地圖、天地圖等等。但是這些地圖提供出的API比較受限制，同時縮放級別zoom比較小，不符合縮略圖的要求。Mapbox提供的地圖是OSM的，它是一個開源免費的地圖，同時縮放級別比較高，滿足縮略圖的需求。OSM地圖加載方式很簡單，在Mapbox注冊一個賬號，拿到秘鑰就可以加載一副直接地圖。當然想實現其他的一些功能，需要調用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 ?技術路線

2.1 ?三維點云數據處理

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

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

本文通過PCL庫，調用PCL點云濾波函數和相關的API，通過多次調參進行點云數據處理。數據處理的流程如圖4所示。

2.2 ?三維點云可視化

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

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

2.3 ?局部坐標轉WGS84坐標

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

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

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

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

公式1. WGS84轉空間直角坐標公式如下：

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

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

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

室內點云和路徑點有一個坐標（x，y，z）有相對應的WGS84坐標（Lon，Lat，H），將（x，y，z）轉換為ENU公用的城市局部坐標[10]，轉換公式如公式2 ?所示：

公式2. 局部坐標系轉旋轉Angle之后的ENU坐標：

公式3. ENU坐標轉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. 轉換后的空間直角坐標跟（Ref_X，Ref_Y，Ref_Z）坐標相差一個偏移量，將（dx，dy，dz）轉換到（Ref_X，Ref_Y，Ref_Z）對應的空間直角坐標

Cover_X = Ref_X + dx;

Cover_Y = Ref_Y + dy;

Cover_Z = Ref_Z + dz;

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

公式5. 空間之間坐標轉換為WGS84坐標，公式如下：

計算所需要的參數：

a = 6378137;

b = 6356752.314245179

）

2.4 ?三維室內點云漫游的構建

構建一個室內三維點云漫游系統需要以下必須的構件：基于HTML的場景容器、Three.js 提供場景（scene）、相機（camera）、渲染（render）、鼠標監聽事件。

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

2.4.1 ?加載三維點云

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

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

2.4.2 ?漫游瀏覽效果設計

通過調用Three.js中PerspectiveCamera達到人眼看世界的視覺效果。PerspectiveCamera有位置屬性、視場角屬性，獲取路徑點的位置信息，將位置信息賦予相機位置屬性達到在點云中漫游瀏覽的視覺效果。Js函數中有監聽鼠標左右鍵點擊以及鼠標滑輪正反滑動事件，通過監聽鼠標滑輪滑動事件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 ?點云渲染

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

2.4.4 ?點云測量

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

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

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

new mapboxgl.Marker（el）

.setLngLat（coordinates）

.addTo（button_right_map）;

}

}）;將標記點重新賦新的位置數據。

3 ?應用實例

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

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

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

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

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

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

4 ?結束語

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

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

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

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

參考文獻

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

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

[3] 王連杰， 韋群. 三維云圖仿真系統設計與實現[J]. 軟件， 2018， 39（5）： 151-155.

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

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

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

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

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

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

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