Potree是一种基于WebGL的点云数据可视化解决方案
是一套开源的系统,基于Three.js
对点云数据进行了多尺度的管理,在数据传输和可视化上都做了优化
下载
https://github.com/potree/potree
安装依赖
npm install
运行
npm start
(1)生成 build
(2)启动服务器localhost:1234,可以在浏览器中打开 http://localhost:1234/examples/ 查看自带的示例
应用:
使用PotreeJS在Web上展示的点云文件
(1)需要使用PotreeConverter将txt、las等点云数据转换为Potree格式
PotreeConverter下载 https://github.com/potree/PotreeConverter
下载 PotreeConverter 1.7
PotreeConverter harbor.las -o demo --output-format LAS
转出来demo下的目录结构为(2.0.1版本的目录不是面这样的,没找到cloud.js)
(2)前端页面
将 libs、build ,转出来的demo放同一个目录下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Potree Viewer</title> <link rel="stylesheet" type="text/css" href="build/potree/potree.css"> <link rel="stylesheet" type="text/css" href="libs/jquery-ui/jquery-ui.min.css"> <link rel="stylesheet" type="text/css" href="libs/openlayers3/ol.css"> <link rel="stylesheet" type="text/css" href="libs/spectrum/spectrum.css"> <link rel="stylesheet" type="text/css" href="libs/jstree/themes/mixed/style.css"> </head> <body> <script src="libs/jquery/jquery-3.1.1.min.js"></script> <script src="libs/spectrum/spectrum.js"></script> <script src="libs/jquery-ui/jquery-ui.min.js"></script> <script src="libs/three.js/build/three.min.js"></script> <script src="libs/three.js/extra/lines.js"></script> <script src="libs/other/BinaryHeap.js"></script> <script src="libs/tween/tween.min.js"></script> <script src="libs/d3/d3.js"></script> <script src="libs/proj4/proj4.js"></script> <script src="libs/openlayers3/ol.js"></script> <script src="libs/i18next/i18next.js"></script> <script src="libs/jstree/jstree.js"></script> <script src="build/potree/potree.js"></script> <script src="libs/plasio/js/laslaz.js"></script> <div class="potree_container" style="position: absolute; 100%; height: 100%; left: 0px; top: 0px; "> <div id="potree_render_area" > </div> <div id="potree_sidebar_container"> </div> </div> <script> window.viewer = new Potree.Viewer(document.getElementById("potree_render_area")); viewer.setEDLEnabled(true); viewer.setFOV(60); viewer.setPointBudget(2_000_000); viewer.loadSettingsFromURL(); // Load and add point cloud to scene Potree.loadPointCloud("http://127.0.0.1/potree/demo/cloud.js", "MLS", e => { let scene = viewer.scene; let pointcloud = e.pointcloud; let material = pointcloud.material; material.size = 0.5; material.minSize = 2.0; material.pointSizeType = Potree.PointSizeType.ADAPTIVE; material.shape = Potree.PointShape.SQUARE; material.activeAttributeName = "rgba"; scene.addPointCloud(pointcloud); }); </script> </body> </html>
缺点:
基于点云格式显示,存在部分失真
las文件
链接:https://pan.baidu.com/s/1Smka2Go9AKFnwfbcsYA7DA
提取码:5jyj