Three.js用射线获取到距离鼠标位置最近的图形，以及该图形周围的图形

在Three.js中，可以使用`Raycaster`类来获取射线与场景中的物体之间的交点。可以通过以下步骤获取到距离鼠标位置最近的图形，以及该图形周围的图形：

1. 获取鼠标位置，可以使用`event.clientX`和`event.clientY`来获取鼠标的屏幕坐标。

2. 将屏幕坐标转换为三维空间坐标，可以使用`THREE.Vector3`类的`unproject()`方法将屏幕坐标转换为射线的起点。

   const mouse = new THREE.Vector2();
   const raycaster = new THREE.Raycaster();
   
   function onMouseMove(event) {
     // 获取鼠标位置
     mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
     mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
     
     // 将屏幕坐标转换为三维空间坐标
     const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
     vector.unproject(camera);
   
     // 设置射线的起点和方向
     raycaster.set(camera.position, vector.sub(camera.position).normalize());
   }

3. 获取射线与场景中物体的交点，可以使用`Raycaster`类的`intersectObjects()`方法。该方法返回一个包含所有交点信息的数组，按距离从近到远排序。

   function onMouseMove(event) {
     // ...
   
     // 获取射线与物体的交点
     const intersects = raycaster.intersectObjects(scene.children);
   
     // 如果存在交点，则获取距离最近的图形
     if (intersects.length > 0) {
       const closestObject = intersects[0].object;
       // TODO: 处理距离最近的图形及其周围的图形
     }
   }

4. 处理距离最近的图形及其周围的图形。可以根据需要从`intersects`数组中获取相关信息，例如交点的位置、法线向量、UV坐标等。可以使用`closestObject`的`parent`属性获取其所在的容器对象，然后遍历容器对象的子对象获取周围的图形。

   if (intersects.length > 0) {
     const closestObject = intersects[0].object;
     const container = closestObject.parent;
   
     // 处理距离最近的图形
     console.log('closest object:', closestObject);
     
     // 处理周围的图形
     const nearbyObjects = [];
     container.children.forEach(child => {
       if (child !== closestObject) {
         nearbyObjects.push(child);
       }
     });
     console.log('nearby objects:', nearbyObjects);
   }