在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 = $(`
				<span>
					这是我的测试点位
					<img name="action_return_number" src="./AllScren.png" class="annotation-action-icon" style="width: 50px;height: 50px;"/>
					<div style='color:red'>测试样式属性</div>
				</span>`);
				// 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);