2022-02-23 potree详细步骤

cmake

  • 在官网下载cmake的zip文件（binary distributions下最近版本的zip）
  • 解压后找到bin/cmake.exe的路径
  • “系统控制面板”“高级系统设置”“高级”“环境变量”“系统变量path”“新建”，上一步中的路径

  • win+r cmd 中输入命令cmake -version


    image.png

    这个要等一下，过一会儿才会好，路径最后

lastools

  • 在D盘创建目录D:/dev/workspaces2/lastools
  • 下载lastools官网中的LAStools-master.zip
  • 解压后在下面的LASzip文件夹下创建一个build
  • cd D:\dev\workspaces2\lastools\LAStools-master\LASzip\build

  • cmake ../


    image.png

PotreeConverter

  • 在D盘创建目录D:/dev/workspaces2/potreeconverter
  • 下载GitHub上PotreeConverter-master.zip
  • 解压后在下面的文件夹创建一个build
  • cd D:\dev\workspaces2\potreeconverter\PotreeConverter-master\build
  • cmake -DLASZIP_INCLUDE_DIRS=D:\dev\workspaces2\lastools\LAStools-master\LASzip\dll -DLASZIP_LIBRARY=D:\dev\workspaces2\lastools\LAStools-master\LASzip\build\src\Release\laszip.lib ..\
    并没有找到编译后的PotreeConverter.exe
    image.png

    干脆就用GitHub中编译好的PotreeConverter

  • 下载PotreeConverter_2.1_x64_windows


    image.png
  • 找个las文件试试可以不可以转换成“切片”
  • PotreeConverter.exe pcloud_tobacco-Cloud.las -o D:\dev\workspaces2\potreeconverter\PotreeConverter_2.1_x64_windows\newtest

  • 切片后的目录下的文件如图所示


    image.png

node.js

  • 安装node.js(node-v16.14.0-x64.msi这个是用来安装的程序包）

  • 想用npm命令时出现问题是因为没有配置环境变量的问题（和前面一样在path中添加node.js安装的路径）


    image.png

Potree

  • 在解压potree-master.zip下的文件夹下创建build/potree
  • cd D:\dev\workspaces2\potree\potree-master\build\potree
  • npm install
  • npm start（这个要保持开着本地服务器才能用）

  • 在浏览器地址栏中输入localhost:1234（不要加https)


    image.png

output.html

  • 把前面potreeconverter转好的文件改成例子里的形式
  • 前面转好的文件在D:\dev\workspaces2\potreeconverter\PotreeConverter_2.1_x64_windows\newtest
  • 复制这个文件夹到D:\dev\workspaces2\potree\potree-master\pointclouds
  • 复制并修改D:\dev\workspaces2\potree\potree-master\examples中的一个例子
    例如：
<!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/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>

    <!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
    <!-- INCLUDE SETTINGS HERE -->

    <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
        <div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
        <div id="potree_sidebar_container"> </div>
    </div>

    <script type="module">

    import * as THREE from "../libs/three.js/build/three.module.js";
        window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));

        viewer.setEDLEnabled(true);
        viewer.setFOV(60);
        viewer.setPointBudget(2_000_000);
        viewer.loadSettingsFromURL();

        viewer.setDescription("Loading Entwine-generated EPT format");

        viewer.loadGUI(() => {
            viewer.setLanguage('en');
            $("#menu_appearance").next().show();
        });

        var path = "../pointclouds/newtest/metadata.json";
        var name = "tobacco";

        var getQueryParam = function(name) {
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(window.location.href);
            if (!results || !results[2]) return null;
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

        var r = getQueryParam('r');
        if (r) {
            name = r;
            var http = 'http';
            if (r.substr(0, http.length) == http) path = name;
            else path = "../pointclouds/" + name + "/metadata.json";
        }

        Potree.loadPointCloud(path, name, function(e){
            viewer.scene.addPointCloud(e.pointcloud);

            let material = e.pointcloud.material;
            material.size = 1;
            material.pointSizeType = Potree.PointSizeType.ADAPTIVE;

            viewer.fitToScreen(0.5);
        });
    </script>
  </body>
</html>
其实就只用改这一个小地方

  • 刷新可以在本地服务器看到这个文件


    image.png
  • 点击即可拥有带有工具的点云可视化网页
  • 测量所需要的值

参考：
https://github.com/potree/potree
https://blog.csdn.net/yhzrf/article/details/107312147
https://www.jianshu.com/p/8de36eb41aff

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容