Three.js飞线添加光点滑过效果

要实现这个效果，可以使用 Three.js 中的 `Raycaster` 和 `Points` 对象。

首先，创建一个 `Points` 对象，将其作为光点的容器。然后，创建一个 `Raycaster` 对象，用于检测鼠标是否滑过了某根飞线。当检测到鼠标滑过时，将光点的位置设置为飞线的终点位置，并将光点添加到 `Points` 对象中。

以下是示例代码：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const pointsGeometry = new THREE.Geometry();
const pointsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 10 });
const points = new THREE.Points(pointsGeometry, pointsMaterial);

// 创建飞线
const line = new THREE.Line(geometry, material);
scene.add(line);

// 监听鼠标移动事件
window.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {
  // 计算鼠标在屏幕上的位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 使用 Raycaster 进行鼠标检测
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(line);

  if (intersects.length > 0) {
    // 获取飞线的终点位置
    const endPosition = intersects[0].point;

    // 将光点的位置设置为飞线的终点位置
    pointsGeometry.vertices.push(endPosition);
    pointsGeometry.verticesNeedUpdate = true;

    // 将光点添加到场景中
    scene.add(points);
  }
}

需要注意的是，这个效果可以消耗大量的性能，因为每次鼠标移动都会重新计算光点的位置。如果需要优化性能，可以考虑限制检测的频率，或者使用其他更高效的方法实现。