在pothree中添加点和自定义样式


我们常常使用three来实现点云,当数据量很少时three的实现效果很好,当点云文件过大时,three的表现就比较差强人意了。所以我们采用了poThree来实现点云,本文我们讲一下在pothree中添加自定义点的实现方法。

1.实现一个name标签:效果图:

 实现步骤

				let aRoot = potreeViewer.scene.annotations;

				let aCA13 = new Potree.Annotation({
					title: "Whale Rock Reservoir", // title的名称
					position: [675036.45, 3850315.78, 65076.70],  //title的位置
					cameraPosition: [675036.45, 3850315.78, 65076.70],// 点击后摄像机的位置
					cameraTarget: [692869.03, 3925774.14, 1581.51],//点击后摄像机指向的位置
				});
				aRoot.add(aCA13);

  点击点位后视角会跳转到目标位置,不需要的话就删除最后两个配置

2.实现带图片的自定义点,并监听属性,效果图:

 实现步骤

                                let aRoot = potreeViewer.scene.annotations;
				// 自定义样式title
				let elTitle = $(`
				
					这是我的测试点位
					
					
测试样式属性
`); // title点击事件监听 elTitle.find("img[name=action_return_number]").click(() => { console.log(99999999999) event.stopPropagation(); // 阻断,默认事件,包括视角调整 }); let aTreeReturns = new Potree.Annotation({ title: elTitle, position: [675756.75, 3937590.94, 80.21], cameraPosition: [693073.32, 3922354.02, 2154.17], cameraTarget: [692845.46, 3925528.53, 140.91], }); aRoot.add(aTreeReturns);