Potree 001 Potree介紹

1、Potree是什麼

Potree是一種基於WebGL的點雲資料視覺化解決方案，包含點雲資料轉化，以及進行視覺化的原始碼。該解決方案的主要優勢在於對點雲資料進行了多尺度的管理，在資料傳輸和視覺化上都做了優化。它是一套開源的系統，基於Three.js，由奧地利維也納理工大學的Harvest4D專案貢獻。

2、獲取Potree原始碼

Potree的git地址為https://github.com/potree，開啟後，如下圖所示

目前我們的目的是做一套可部署到本地點雲載入顯示軟體，需要關注potree和PotreeDesktop兩個內容。其中potree是核心，使用jsvascript開發，PotreeDesktop使用electron，把Web程式包裝成了桌面程式，於是我們就可以使用javascript基於potree開發桌面軟體了。

如果從頭開始搭建開發環境，肯定會很複雜，例如需要下載部署好Potree環境，需要搭建electron環境。有個比較簡單的辦法就是，我們把官方的PotreeDesktop部署包下載下來，在此基礎上修改擴充套件即可。

3、獲取PotreeDesktop

在potree主頁，點選PotreeDesktop，進入該模組的主頁面，如下圖所示

右側會有PotreeDesktop的釋出包，點選進入，下載最新的部署包（PotreeDesktop_1.8.1_x64_windows.zip）即可。下載後，解壓出內容，會發現PotreeDesktop並沒有做多少實質性的內容，只是把Potree做好的主頁面包成了桌面程式，並把開發桌面使用的環境進行了整理。不過做到這些就足夠了，這樣就為我們提供了很大的方便，讓我們把更多的精力放到了解Potree上。

原始碼根目錄的內容如下圖所示。

我們開發的桌面程式，可雙擊執行PotreeDesktop.bat，執行系統。PotreeDesktop.bat檔案用記事本開啟，內容如下。

start ./node_modules/electron/dist/electron.exe ./main

意思是啟動指定目錄下的electron.exe檔案，後面跟了一個引數，./main，我感覺這個引數應該指的是根目錄下的main.js檔案。這個沒有仔細研究過，基本上PotreeDesktop為我們搭建好的執行環境不太用修改，直接擴充套件即可。而實時上，整個系統也是從main.js啟動。

雙擊執行PotreeDesktop.bat，執行系統，彈出的主介面如下圖所示

4、PotreeDesktop結構介紹

在根目錄下，有幾個重要的單檔案，main.js、index.html、PotreeDesktop.bat。其中PotreeDesktop.bat我們已經說過了，是系統啟動的快捷方式檔案，main.js是系統啟動後，首先執行的檔案。在這個檔案裡面主要設定了和electron相關的一些內容，例如electron的選單、系統標題以及載入哪個主頁面等。

index.html就是系統啟動後，包裝顯示的主頁面，我們開發的內容以及頁面，都是通過該頁面展示出來，從這個頁面開始，就正式進入普通的Web開發了。

除了檔案之外，還有幾個資料夾，src、node_modules和libs。其中src為PotreeDesktop自己的原始碼，裡面包含desktop.js和desktop.css兩個檔案。看了下這連兩個檔案，主要實現了把las檔案拖到點雲主顯示區，並呼叫轉換工具對點雲資料進行轉換操作，並載入顯示的流程，程式碼很容易看明白。

node_modules目錄感覺主要包含了electron和nodejs的一些環境以及依賴項。該模組組織的非常清晰，執行也正常，所以我一直是沒有動過該目錄下的內容。

libs目錄是我們用到的一些js庫。包括Potree庫、Threejs庫以及用到的點雲轉換可執行程式等。該目錄直接按照設定好的使用即可，不用做任何修改。