三维可视化引擎之基于potree搭建SDK

最近公司在做点云可视化的工作，里面涉及到加载psd/las等点云数据，查找了很多的资料，整体感觉potree靠谱点，虽然有的人说，potree不够精细，清晰度不行等等，效率还可以。但是亲，看你应用到什么场景，如果只是展示点云数据，我感觉够用了，如果展示精细化点云模型，需要考虑一下。

简单数一下目前应用点云的三种方式：

1. 直接调用potree编译后的js文件，作为插件引入。

优点：方便、快捷、不污染业务代码、入门也比较简单

缺点：遇到具体业务，很难修改里面的代码，扩展性差，可控性差

2. 基于potree框架搭建可视化引擎，修改里面的源码结构，然后生成SDK。

优点：可控性强，扩展性强，灵活度高

缺点：学习成本比较大，耦合性强，很难再次升级

3. 按照自己的业务搭建sdk，然后作为包将potree源码拷贝到libs目录，作为包引用

优点：可控性强，扩展性强，灵活度高，升级方便

缺点：学习成本比较大

也行大家有很多其他方式，我只是列举了几种，有兴趣的朋友，可以留言。

这里主要说一下第三种方式，大概思路：

第一步：选框架：rollup（或者webpack+rollup）

第二步：搭建代码结构，如图

第三步：将potree代码放入公共目录下面，根据自己情况决定，我这里直接放到libs里面了。

第四步：修改potree编译结构，比如workers，需要重新编译，其他编译后的类需要重新组装。

有的小伙伴说了，直接引入不就行了，那样的话，和直接在项目中引入有什么区别，所以我们的重新组装potree，是让他作为我们sdk的一部分才可以。

第五步：制作map出口，其他平台调用的组件。

class MapView {

constructor(div, opt) {

this.init(div, opt);

}

init(div) {

let appContainer = document.getElementById(div);

this.viewer = new Viewer(appContainer);

}

}

export { MapView }

第六步：编译出口，init.js 存放所有输出类

第七步：编译生成js文件。

第八步：npm 发包

第九步：其他平台引用。

整体大概这个思路，因为工作比较忙，粗略写一下，如果有什么不太明天的，可以私聊！！！

QQ:2945853209