射线投射（Raycaster）的物理本质

Three.js中的Raycaster本质是模拟现实世界的光线投射行为，通过从相机位置发射一条不可见的”虚拟射线”，检测与场景中物体的交点。这种非接触式交互方式完美契合3D场景的交互需求，其数学基础可追溯至几何学中的空间直线方程。

射线由起点（origin）和方向向量（direction）定义，在Three.js中通过THREE.Raycaster(origin, direction)实例化。方向向量需归一化处理以确保计算精度，实际开发中可通过direction.normalize()方法实现。

坐标空间转换体系

实现精准拾取的核心在于建立屏幕坐标与3D场景坐标的映射关系，这涉及多层坐标转换：

1. 屏幕坐标归一化：将鼠标事件提供的像素坐标（如event.clientX/Y）转换为标准设备坐标（NDC），范围[-1,1]

   function getNormalizedCoords(event, renderer) {
     const rect = renderer.domElement.getBoundingClientRect();
     const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
     const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
     return { x, y };
   }

2. 投影矩阵转换：通过相机投影矩阵将归一化坐标转换为3D空间中的方向向量

   const mouse = new THREE.Vector2(x, y);
   const raycaster = new THREE.Raycaster();
   raycaster.setFromCamera(mouse, camera);

3. 层级坐标处理：对于嵌套在Group中的物体，需考虑局部坐标系与世界坐标系的转换。可通过object.worldToLocal(point)方法实现坐标转换。

碰撞检测算法实现

Raycaster的核心功能通过intersectObjects方法实现，其内部采用分层检测策略：

1. 视锥体剔除：首先排除不在相机视锥体内的物体
2. 包围盒检测：使用轴对齐包围盒（AABB）快速排除明显不碰撞的物体
3. 精确三角形检测：对候选物体进行逐三角形相交测试

实际开发中应合理设置检测参数：

// 精确检测单个物体
const intersects = raycaster.intersectObject(mesh, true); // 第二个参数true表示检测子物体
// 批量检测多个物体（更高效）
const objects = [mesh1, mesh2, group];
const intersects = raycaster.intersectObjects(objects, false);

交互系统设计实践

基础拾取实现

完整拾取流程示例：

function onMouseClick(event) {
  const { x, y } = getNormalizedCoords(event, renderer);
  const mouse = new THREE.Vector2(x, y);
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    const selected = intersects[0].object;
    selected.material.color.setHex(0xff0000); // 高亮显示
  }
}
renderer.domElement.addEventListener('click', onMouseClick);

高级交互优化

1. 距离排序：通过intersects.sort((a,b) => a.distance - b.distance)确保选择最近物体
2. 层级穿透控制：使用intersectObjects的递归参数控制检测深度
3. 性能优化：
   • 使用THREE.Layers进行图层过滤
   • 对静态物体预先计算包围盒
   • 采用空间分区数据结构（如八叉树）管理复杂场景

实际应用场景

1. 3D模型编辑器：实现顶点/面片选择

   const faceIntersects = raycaster.intersectObject(mesh, false);
   if (faceIntersects.length > 0) {
     const face = faceIntersects[0].face;
     // 处理选中的面片
   }

2. 游戏交互系统：实现武器瞄准、物品收集

3. 数据可视化：柱状图/散点图的点击响应

常见问题解决方案

1. 拾取不准问题：

   • 检查相机投影矩阵是否更新（camera.updateProjectionMatrix()）
   • 确认物体是否被正确添加到检测列表

   • 调试时可视化射线：

     function debugRay(raycaster) {
       const point = new THREE.Vector3();
       const direction = raycaster.ray.direction.clone();
       direction.multiplyScalar(10); // 射线长度
       point.addVectors(raycaster.ray.origin, direction);
       const geometry = new THREE.BufferGeometry().setFromPoints([
         raycaster.ray.origin, point
       ]);
       const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }));
       scene.add(line);
     }

2. 性能瓶颈：

   • 减少检测物体数量（使用图层系统）
   • 对复杂模型使用简化碰撞体
   • 采用Web Workers进行异步检测

3. 移动端适配：

   function handleTouch(event) {
     const touch = event.touches[0];
     const mouseEvent = new MouseEvent('click', {
       clientX: touch.clientX,
       clientY: touch.clientY
     });
     onMouseClick(mouseEvent);
   }

最佳实践建议

1. 封装交互管理器：创建独立的交互处理类，分离渲染与交互逻辑
2. 状态管理：维护选中物体状态，避免重复处理
3. 视觉反馈：提供悬停高亮、点击动画等增强用户体验
4. 无障碍支持：为键盘导航提供等效交互方案

通过系统掌握Raycaster的原理与应用，开发者能够构建出专业级的3D交互系统。从简单的物体选择到复杂的数据可视化交互，这种技术已成为Three.js开发的核心技能之一。建议结合实际项目不断实践，逐步掌握高级优化技巧，最终实现流畅高效的3D交互体验。