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; width: 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