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库以及用到的点云转换可执行程序等。该目录直接按照设置好的使用即可，不用做任何修改。