threejs实现点击模型选中以及对选中模型修改材质

利用 groud来实现对模型的存储

let group = new THREE.Group();

模型加入场景修改

  var scene = new THREE.Scene();
 var loaderStl = new THREE.STLLoader();
			//导入模型
			loaderStl.load('离心叶轮.stl', function(geometry) {

				geometry.name = "李欣"
				console.log(geometry);
				var demoMaterial = new THREE.PointsMaterial({
					color: 0x0000ff,
					size: 0.5 //点对象像素尺寸
				})

				var meshd = new THREE.Points(geometry, demoMaterial)
				group.add(meshd)
				scene.add(group)

			})
 //先将对应的模型加入 对应的groud中，再讲整个groud 加入场景，同时为模型定义唯一的名字，方便后期知道是否点击了整个模型

获取点击模型的数据(具体原理无)

//获取与射线相交的对象数组
			function getIntersects(event) {
				event.preventDefault(); // 阻止默认的点击事件执行, https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
				//console.log("event.clientX:" + event.clientX);
				//console.log("event.clientY:" + event.clientY);

				//声明 rayCaster 和 mouse 变量
				let rayCaster = new THREE.Raycaster();
				let mouse = new THREE.Vector2();

				//通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
				mouse.x = ((event.clientX - document.body.getBoundingClientRect().left) / document.body.offsetWidth) * 2 - 1;
				mouse.y = -((event.clientY - document.body.getBoundingClientRect().top) / document.body.offsetHeight) * 2 +1; //这里为什么是-号，没有就无法点中

				//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
				rayCaster.setFromCamera(mouse, camera);

				//获取与射线相交的对象数组， 其中的元素按照距离排序，越近的越靠前。
				//+true，是对其后代进行查找，这个在这里必须加，因为模型是由很多部分组成的，后代非常多。
				console.log(group)
				let intersects = rayCaster.intersectObjects(group.children, true);

				//返回选中的对象

				// console.log(intersects)

				return intersects;
			}

document.body 为场景，整个根据具体需求去修改

判断是否点击了模型

//鼠标双击触发的方法
			function onMouseDblclick(event) {
				//获取raycaster和所有模型相交的数组，其中的元素按照距离排序，越近的越靠前
				let intersects = getIntersects(event);
				// console.log(intersects);
				// console.log(intersects[0].object);
				
				//获取选中最近的Mesh对象
				//instance坐标是对象，右边是类，判断对象是不是属于这个类的
				if (intersects.length !== 0 && intersects[0].object.geometry.name === '李欣') {

					console.log(intersects, 'xuanz')
					console.log('Mesh!');

					for (var i = 0; i < intersects.length; i++) {
                        
						if(intersects[i].object.geometry.name === '李欣'){
							intersects[i].object.material.color.set(0xff0000);//变为红色
						}
						
						// render();
					}

				} else {
					console.log('未选中 Mesh!');
				}
			}

			document.addEventListener('click', onMouseDblclick);