Potree在web端显示大型点云模型文件

一、克隆项目代码(准备好上网工具,得先有node.js npm 环境)

git clone https://github.com/potree/potree.git

二、依赖安装(换淘宝镜像能快一些)

cd potree
npm install

三、运行

npm start

四、使用样例

打开浏览器,输入http://localhost:1234/,即可看到 Potree 的界面。

 打开任意examples下的html查看模型

五、换成自己的点云模型

将地址中的cloud.js换成自己模型的地址。

// Load and add point cloud to scene
		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/helimap/360/MLS_drive1/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);

			viewer.scene.view.setView(
				[2652381.103, 1249049.447, 411.636],
				[2652364.407, 1249077.205, 399.696],
			);

			run();
		});

		async function run(){

			proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
			proj4.defs("pointcloud", viewer.getProjection());
			let transform = proj4("WGS84", "pointcloud");

			let params = {
				transform: transform
			};

Potree加载的点云格式为OCTree格式的数据结构,无法直接加载格式为LAS,LCD,PLY等格式的点云文件,所以我们需要通过PotreeConverter来将普通的点云格式文件转换为OCtree格式的点云文件。去github下载PotreeConverter对模型文件进行格式转换,只能转换las格式的文件。

https://github.com/potree/PotreeConverter
1.7版本可用

win系统下载目录执行如下样例指令

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

linux系统,可加上版本新版本不好用

git clone https://github.com/potree/PotreeConverter.git
cd PotreeConverter
mkdir build && cd build
cmake ..
make

完成以后执行
PotreeConverter /home/yr/test.las -o /home/yr/output
即可得到模型

转换后的文件结构

换成自己的点云后的效果图

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值