在三维建模、测绘和 GIS 领域，点云数据已成为处理海量空间信息的核心工具。然而，如何高效地在 Web 浏览器中渲染这些数据，却常常成为开发者的痛点。Potree 作为一款开源的、基于 WebGL 的点云可视化解决方案，正好解决了这个问题。它支持高效加载和渲染数亿个点，支持 LOD（细节层次）优化，能在浏览器中流畅展示大规模点云。
本文将从 Potree 的安装开始，一步步指导你运行示例、转换 LAS 文件，并最终在 Web 页面上加载自己的点云数据。无论你是初学者还是有经验的开发者，这份指南都能帮你快速上手。整个过程基于 Windows 系统（其他系统类似），预计耗时 30 分钟。
1. 下载与安装 Potree
Potree 的核心库托管在 GitHub 上，你也可以从 Gitee 镜像下载以加速访问。
- GitHub 下载：https://github.com/potree/potree
- Gitee 下载：https://gitee.com/jslibs/potree
- 或者通过下方链接下载zip压缩包
https://download.csdn.net/download/m0_63586335/92101026?spm=1001.2014.3001.5501
https://download.csdn.net/download/m0_63586335/92101026?spm=1001.2014.3001.5501
克隆仓库后，使用 npm 安装依赖并启动开发服务器：
npm install
npm start
启动成功后，在浏览器中访问 http://localhost:1234/examples，你将看到 Potree 的内置示例页面。这些示例展示了各种点云渲染效果，包括颜色映射、测量工具和相机控制。界面简洁直观，证明 Potree 的渲染性能——即使是数百万点，也能实时交互。
(注：实际运行时，你会看到一个交互式 3D 视图，点云如星空般璀璨。)
2. 导入自己的点云文件：为什么需要 PotreeConverter？
Potree 的示例数据是预处理的，无法直接加载原始点云格式如 LAS 或 TXT。这些格式需要转换为 Potree 专有的分层格式（包括 .potree 文件和 cloud.js 描述文件），以支持 WebGL 的高效渲染。
为此，我们使用 PotreeConverter 工具进行转换。重要提示：必须下载 1.7 版本！后续版本（如 1.8+）在转换后可能缺少 cloud.js 文件，导致加载失败（原因未知，可能是兼容性问题）。你可以从PotreeConverter Releases下载。 PotreeConverter Releaseshttps://github.com/potree/PotreeConverter/releases
或者点击下方链接直接下载1.7版本
https://download.csdn.net/download/m0_63586335/92101020?spm=1001.2014.3001.5501https://download.csdn.net/download/m0_63586335/92101020?spm=1001.2014.3001.5501
Windows 系统下的准备工作
- 下载 PotreeConverter_1.7_windows_x64.zip（第一个 ZIP 包）。
- 解压到无中文路径的目录，例如 C:\\Users\\YourName\\Desktop\\PotreeConverter_1.7_windows_x64。
- 解压后，你会看到 PotreeConverter.exe 可执行文件。
2.配置环境变量（让命令行全局可用）：
- Windows 10/11：
- 右键“此电脑” > “属性” > “高级系统设置” > “环境变量”。
- Windows 7：
- 右键“计算机” > “属性” > “高级系统设置” > “环境变量”。
- 在“系统变量”中找到 “Path”，点击“编辑” > “新建”，添加解压目录路径（例如 C:\\Users\\YourName\\Desktop\\PotreeConverter_1.7_windows_x64）。
- 点击“确定”保存，重启命令提示符（CMD）以生效。
配置完成后，在 CMD 中输入 PotreeConverter.exe –help，如果显示帮助信息，即配置成功。
3. 转换 LAS 文件为 Potree 格式
假设你的 LAS 文件位于 C:\\Users\\YourName\\Desktop\\test\\map.las，并创建一个空输出目录 clouds（例如 C:\\Users\\YourName\\Desktop\\test\\clouds）。
在 CMD 中导航到合适位置，执行转换命令：
PotreeConverter.exe "C:\\Users\\YourName\\Desktop\\test\\map.las" -o "C:\\Users\\YourName\\Desktop\\test\\clouds"
- 参数说明：
- 输入路径：你的 LAS 文件（支持 LAS、LAZ、TXT 等）。
- -o：输出目录，转换后会生成 clouds/map 子文件夹，包含 .potree 文件、cloud.js 和资源文件。
转换过程视文件大小而定（几 MB 的 LAS 文件只需几分钟）。完成后，检查 clouds 目录：你会看到一个完整的 Potree 数据包，包括分层点云文件和元数据。
(典型结构：clouds/map/cloud.js 是关键描述文件。)
提示：如果 LAS 文件很大（>1GB），建议分块处理或使用 -p 参数指定页面大小（默认 250000 点/页）。
4. 在 Web 页面加载转换后的点云
将转出来的clouds文件放到potree-develop/pointclouds目录下
现在，我们用 Potree JS 库加载数据。创建一个简单的 HTML 文件（例如 map.html），放在 potree-develop/examples目录下
目录下。以下是示例代码：
修改代码中的路径(路径)指向你potree-develop/pointclouds/clouds/cloud.js文件 Potree.loadPointCloud("../pointclouds/clouds/cloud.js" …后面省略
-
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="description"content="">
<metaname="author"content="">
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>PotreeViewer</title>
<linkrel="stylesheet"type="text/css"href="../build/potree/potree.css">
<linkrel="stylesheet"type="text/css"href="../libs/jquery-ui/jquery-ui.min.css">
<linkrel="stylesheet"type="text/css"href="../libs/openlayers3/ol.css">
<linkrel="stylesheet"type="text/css"href="../libs/spectrum/spectrum.css">
<linkrel="stylesheet"type="text/css"href="../libs/jstree/themes/mixed/style.css">
</head>
<body>
<scriptsrc="../libs/jquery/jquery-3.1.1.min.js"></script>
<scriptsrc="../libs/spectrum/spectrum.js"></script>
<scriptsrc="../libs/jquery-ui/jquery-ui.min.js"></script>
<scriptsrc="../libs/other/BinaryHeap.js"></script>
<scriptsrc="../libs/tween/tween.min.js"></script>
<scriptsrc="../libs/d3/d3.js"></script>
<scriptsrc="../libs/proj4/proj4.js"></script>
<scriptsrc="../libs/openlayers3/ol.js"></script>
<scriptsrc="../libs/i18next/i18next.js"></script>
<scriptsrc="../libs/jstree/jstree.js"></script>
<scriptsrc="../build/potree/potree.js"></script>
<scriptsrc="../libs/plasio/js/laslaz.js"></script>
<!–INCLUDEADDITIONALDEPENDENCIESHERE–>
<!–INCLUDESETTINGSHERE–>
<divclass="potree_container"style="position:absolute;width:100%;height:100%;left:0px;top:0px;">
<divid="potree_render_area"style="background-image:url('../build/potree/resources/images/background.jpg');"></div>
<divid="potree_sidebar_container"></div>
</div>
<scripttype="module">
import*asTHREEfrom"../libs/three.js/build/three.module.js";
window.viewer=newPotree.Viewer(document.getElementById("potree_render_area"));
viewer.setEDLEnabled(false);
viewer.setFOV(60);
viewer.setPointBudget(1_000_000);
viewer.loadSettingsFromURL();
viewer.loadGUI(()=>{
viewer.setLanguage('en');
$("#menu_scene").next().show();
viewer.toggleSidebar();
});
//Loadandaddpointcloudtoscene
Potree.loadPointCloud("../pointclouds/clouds/cloud.js","liontakanawanormals",e=>{
letscene=viewer.scene;
letpointcloud=e.pointcloud;
scene.addPointCloud(pointcloud);
letmaterial=pointcloud.material;
material.size=3;
material.pointSizeType=Potree.PointSizeType.FIXED;
material.shape=Potree.PointShape.CIRCLE;
//Editmatcapproperties
material.activeAttributeName="matcap";
material.matcap='metal_shiny.jpg'
viewer.scene.view.setView(
[4.087,-2.473,2.015],
[-2.887,3.882,-1.160],
);
});
</script>
</body>
</html>
将此文件保存后，通过 npm start 启动服务器，访问 http://localhost:1234/examples/map.html。你会看到自己的点云数据在浏览器中渲染！使用鼠标拖拽旋转、滚轮缩放，支持测量和截图等工具。
(点云如烟雾般流动，细节丰富。)
未完成 , 后续我将增加vue写法分享…
