Potree中文教程【二】-- 如何加载自己的点云

如何加载自己的点云文件

在上一篇中我们讲到了Potree加载的点云格式为OCTree格式的数据结构,无法直接加载格式为LAS,LCD,PLY等格式的点云文件,所以我们需要通过PotreeConverter来将普通的点云格式文件转换为OCtree格式的点云文件。

下载源码和编译
git clone https://github.com/potree/PotreeConverter.git
cd PotreeConverter
mkdir build && cd build
cmake ..
make

这一步通常做纯前端工作的同学可能会遇到问题,因为PotreeConverter是C++开发的,需要gcc g++编译器才可以进行编译。

如果是在Linux下,可命令行输入sudo apt install gcc g++进行安装。

如果是在Windows下并且没有C++编译经验,建议直接下载已编译的二进制文件PotreeConverter_2.1.1_x64_windows.zip

运行转换程序
PotreeConverter <input_path> -o <output_path>

例如:

Linux: PotreeConverter /home/yr/test.las -o /home/yr/output

Windows:PotreeConverter.exe D:\\test.las -o D:\\output

转换成功后在output文件夹中将会得到以下文件结构

请添加图片描述

在Potree中加载转换后的点云

我们打开上一篇中提到的viewer.html示例源码,修改加载路径为我们转换后的metadata.json文件路径。

// before
Potree.loadPointCloud("../pointclouds/vol_total/cloud.js", "sigeom.sa", e => {
			...
		});
		
// after
Potree.loadPointCloud("/home/yr/output/metadata.json", "sigeom.sa", e => {
			...
		});

此时我们在浏览器中重新打开viewer.html示例,应该就能看到我们自己的三维点云了。

注意:PotreeConverter转换LAS格式文件时,LAS文件的版本不能低于1.2。

LAS文件的版本可通过CloudCompare进行查看,下图中的LAS文件就是无法正常转换的
请添加图片描述

在下一篇中,我们将了解Potree点云可视化工具的基本功能。

欢迎Star我的Github仓库,您的支持是我持续的动力,感谢!!

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个简单的示例来演示如何在Vue中使用`potree-core`库来渲染点云数据。 首先,你需要在Vue组件中引入`potree-core`库: ```javascript import * as Potree from 'potree-core'; ``` 然后,你需要在Vue组件的`mounted`生命周期钩子中创建一个`potreeViewer`对象,并将其添加到HTML页面中: ```javascript mounted() { // 创建potreeViewer对象 const potreeViewer = new Potree.Viewer(this.$refs.viewer); // 设置视角 potreeViewer.setFOV(60); potreeViewer.setPointBudget(1_000_000); potreeViewer.setEDLEnabled(false); potreeViewer.setPointSize(1); // 加载点云数据 Potree.loadPointCloud('/path/to/pointcloud', 'pointcloud', e => { const pointcloud = e.pointcloud; potreeViewer.scene.addPointCloud(pointcloud); // 自适应相机视角 const bs = pointcloud.pcoGeometry.tightBoundingBox; const node = { name: 'auto_view', position: bs.getCenter(new THREE.Vector3()), target: pointcloud.pcoGeometry.boundingBox.getCenter(new THREE.Vector3()) }; potreeViewer.scene.view.position.copy(node.position); potreeViewer.scene.view.lookAt(node.target); }); // 添加potreeViewer对象到HTML页面中 this.$refs.viewer.appendChild(potreeViewer.renderer.domElement); } ``` 这里的`$refs.viewer`是指向HTML页面中的一个`<div>`元素的引用。在上面的代码中,我们创建了一个`potreeViewer`对象,并将其渲染到HTML页面中的`<div>`元素中。然后,我们使用`Potree.loadPointCloud()`方法加载点云数据,并将其添加到`potreeViewer`对象的场景中。 最后,我们将`potreeViewer`对象的渲染器添加到HTML页面中,这样就可以在浏览器中显示点云数据了。 希望这个简单的示例能够帮助你开始在Vue项目中使用`potree-core`库来渲染点云数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值