1、 簡介html
基於Web端的三維模型展現，這裏僅介紹Three.js和Potree。git
Three.js 是一款基於WebGL的運行在瀏覽器中的 3D 開源引擎，用它建立各類三維場景。它相似於Meshlab開源中的VCGLib庫，後者是基於OpenGL進行封裝的3D開源庫，本質是相同的。因此，基於three.js會比較靈活，模型顯示不失真。但對初學者來講，學習難度較大。另外，它沒有對模型網格存取與顯示作什麼優化，在模型文件較大時，在瀏覽器打開時會等待較長時間。github
Potree是一種基於WebGL的點雲數據可視化解決方案，包含點雲數據轉化，以及進行可視化的源碼。該解決方案的主要優點在於對點雲數據進行了多尺度的管理，在數據傳輸和可視化上都作了優化。它是一套開源的系統，基於Three.js，由奧地利維也納理工大學的Harvest4D項目貢獻。web
實際應用中，業務三維模型每每比較大(100M以上)，考慮到網絡帶寬等諸多原素，爲了在Web端能快速的展現與操做三維模型。若是選擇Three.js，工做量會比較大；選擇Potree會相對比較省事，由於它已經在文件分離下載與快速渲染方面已行了不少優化。Potree的主要缺點是基於點雲格式顯示，存在部分失真狀況。因此，下面主要將針對Potree進行重點說明，Three.js內容請你們參考下面網址。數據庫
2、 軟件環境瀏覽器
2.1 Potree服務器
https://github.com/potree/potree 網絡
2.2 PotreeConverter工具
https://github.com/potree/PotreeConverter 學習
2.3 Potree學習
https://github.com/potree/potree/blob/master/docs/getting_started.md
2.4 Three.js
https://github.com/mrdoob/three.js/
2.5 Three.js學習
3、 要點
3.1 轉換
Potree在Web上展現的點雲文件，支持binary，las和laz三種數據格式。因此，對其它的三維模型文件格式（例如：ply），需經過PotreeConverter工具進行轉換。
如圖一所示，通過命令行形式轉換後，會生成下面內容：
- 會生成多個.bin數據文件，每個大小均在100K左右。這樣，Web加載時能夠逐漸下載顯示，而不是所有下載完後才顯示。
- 總體資源打包，並生成一個靜態html展現主頁，方便瀏覽。
圖一
3.2 IO支持
Potree Converter支持格式：
- 輸入格式：las、laz、 binary、ply、xyz和ptx；
- 輸出格式：binary、las和laz。
3.3 速度
採用了特殊的點雲文件壓縮與分割處理，以及逐漸渲染方式，速度仍是明顯很快的。經本人測試：Potree官網提供的多個demo顯示，最長時間爲20秒顯示完畢，通常性的都是10秒內顯示完畢。假設若是是在國內網存取，理論上速度應該更快些。
3.4 瀏覽器支持
對目前主流的IE、Chrome和FireFox都支持，本人已在Chromev 57.0.2970.0和MicrosoftEdgeHTML 14.14393測試經過。
3.5 操做支持
支持鼠標左鍵旋轉、滾輪縮放、右鍵平移。另外，還提供強大的屬性操做界面，例如：角測量、高度測量、距離測量、面積測量、體積測量、多視角觀察等等。除了直接對模型進行編輯修改外，基本上其它功能都有。
3.6 中文支持
如圖二所示屬性操做界面，目前頁面是能夠支持中文，但引用的i18next庫好象不支持中文，致使中文測試時顯示爲亂碼。
圖二
4、 Web展現效果
通過在本地搭建web服務器後，進行測試(例如：http://localhost/potree/test.html)。下面是一些Potree在Web上顯示效果與Meshlab模型顯示的對比，實際上也至關於基於點的模型(點雲)文件和原始三維模型(例如：ply)進行比較。
備註：採用potree converter進行轉換時，若是調整某些參數，理論上生成的點雲文件應該會更清晰一些。
圖三
5、 基於Potree的解決方案
思路：在存放三維模型文件的服務器，存在一個後臺運行的程序：定時讀取新的三維模型文件、調用PotreeConverter控制檯程序自動轉換模型文件到Potree支持的目錄、關閉PotreeConverter控制檯程序、將生成Potree目錄信息拼接成http網址(例如：http://localhost/potree/test.html，其中localhost將被真實的域名或IP取代)，最後更新到關聯數據庫中。此後臺程序將包裝成Service API的形式（例如:RESTful方式）以供調用。當服務層每上傳一個模型文件成功後，調用該後臺Service API接口來獲到生成的網址，將該網址隨原客戶端信息一塊兒更新到數據庫中。這種由服務層直接拉的方式，可避免定時轉換問題、動態監測模型文件、以及遠程更新數據庫的問題。
例如：
PotreeConverter控制檯轉換命令：
PotreeConverterD:\MeshLab_Model\20150602112021.ply –o C:\xampp\htdocs\potree –generate-page testCabinet
如下是我as格式的轉換命令
.\PotreeConverter.exe E:\OriginData\qinghai\las -o E:\OriginData\qinghai\las --generate-page web --output-format LAS --material INTENSITY
轉換後效果以下
拼接而成的網址:
http://localhost/potree/testCabinet.html (本地測試用)
圖四
6、 總結
通過一系列的測試、比較與分析，potree在速度方面已經基本達到要求。顯示質量方面略有不足，主要緣由是它是基於點雲模型做爲基礎來顯示，因此自己模型質量就比不上原始三維模型。不過，總體上看顯示效果仍是差很少的，做爲在瀏覽器上能快速觀看地目的，能夠知足此需求。