Three.js Raycaster鼠标移动相交检测性能问题及优化方案咨询

你说得对——在鼠标移动事件里直接调用raycaster.intersectObjects()确实很容易拖垮性能，哪怕你的this.indicatorHotspotPlane数组只有5个对象，高频触发的mousemove事件也会让这个开销被持续放大。给你几个实用的优化思路，亲测能解决性能问题：

• 节流Raycast调用频率
  不要每次鼠标移动都执行射线检测，而是把检测逻辑绑定到浏览器的渲染帧周期（用requestAnimationFrame），或者限制固定时间间隔才执行一次，避免同一帧内重复计算。示例代码：

  let isRaycasting = false;
  window.addEventListener('mousemove', (e) => {
    if (!isRaycasting) {
      requestAnimationFrame(() => {
        // 更新射线投射器的鼠标位置
        raycaster.setFromCamera(mouse, camera);
        // 执行相交检测
        const intersects = raycaster.intersectObjects(this.indicatorHotspotPlane);
        // 处理你的相交逻辑...
        
        isRaycasting = false;
      });
      isRaycasting = true;
    }
  });
  

  这个方法能把射线检测的频率限制在每秒60次（和屏幕帧率一致），直接砍掉多余的触发次数，性能提升非常明显。

• 先做包围盒预检测
  射线和复杂几何体的相交计算开销大，但和简单包围盒的碰撞检测快很多。你可以先给每个hotspot对象缓存包围盒，在鼠标移动时先过滤掉完全不相交的对象，只对可能相交的对象做精细检测：

  // 初始化时缓存每个hotspot的包围盒
  this.indicatorHotspotPlane.forEach(hotspot => {
    hotspot.geometry.computeBoundingBox();
    hotspot.boundingBox = hotspot.geometry.boundingBox.clone();
    // 把包围盒转换到世界坐标系（如果hotspot有父级变换）
    hotspot.boundingBox.applyMatrix4(hotspot.matrixWorld);
  });
  
  // 鼠标移动时的检测逻辑
  raycaster.setFromCamera(mouse, camera);
  const validIntersects = [];
  this.indicatorHotspotPlane.forEach(hotspot => {
    // 先检测包围盒
    if (raycaster.ray.intersectsBox(hotspot.boundingBox)) {
      // 再做精细的几何体相交检测
      const objIntersect = raycaster.intersectObject(hotspot);
      if (objIntersect.length > 0) {
        validIntersects.push(...objIntersect);
      }
    }
  });
  

  这种分层检测能快速排除不相关的对象，哪怕对象数量增加，也能保持较低的计算开销。

• 自定义Raycast逻辑（可选）
  如果你的hotspot是简单形状（比如平面、球体），可以自己实现更轻量的相交检测逻辑，代替Three.js默认的intersectObject方法。比如对于平面，直接计算射线和平面的交点，比遍历几何体面快得多。

如果你的场景里只有5个hotspot，上面前两个方法任意一个应该就能解决性能问题，优先试试节流方案，实现起来最简单，效果也最直接。

内容的提问来源于stack exchange，提问作者rmartrenado