three.js 选中物体

最新推荐文章于 2024-10-31 00:54:03 发布

原创

最新推荐文章于 2024-10-31 00:54:03 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #three.js #可视化

这篇博客介绍了如何在Three.js场景中实现物体的选中高亮和旋转控制。通过监听鼠标点击事件，当用户点击物体时，该物体将被选中并高亮显示为深绿宝石色，同时设置为旋转控制的中心。如果再次点击其他物体，上一个选中的物体恢复原状，新的物体被选中。此外，按下ESC键可以取消当前选中状态。此功能增强了用户在三维场景中的交互体验。

实现功能：

1.选中物体，高亮显示，并设置为旋转控制中心与视口中心；

2.选中下一个物体，上个物体选中效果恢复；

3.按ESC键退出

代码：

//【事件】-单击click，执行
			//1.1s内无鼠标拖拽，再执行：构件选中函数onDocumentMouseClick1();
			//2.1s内鼠标拖拽，执行：旋转定位函数、并以构件中心旋转
			//【函数】点击选中构件
			var zu1 = [];
			var zu2 = [];
			function onDocumentMouseClick1(event) {
				var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
				vector = vector.unproject(camera);//用摄像机的投影矩阵解压矢量
				var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
				var intersects = raycaster.intersectObjects(scene.children);
				//console.log(zu1);
				//console.log(zu2);
				if (zu1.length == 0) {
					if (intersects.length > 0) {
						zu2.push(intersects[0].object.material.clone());//存储材质
						//console.log(intersects);
						orbitControls.target = intersects[0].point;//选中构件设置为旋转中心（置于控制器视角中心）

最低0.47元/天解锁文章