Potree

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

posted @ 2020-09-03 18:03  慕尘  阅读(3648)  评论(0)  编辑  收藏  举报