一、Raycaster核心机制解析

Raycaster是Three.js提供的射线投射工具，通过模拟从相机位置发射的不可见射线，检测与场景中物体的交点。其工作原理基于三维空间中的几何计算，支持两种检测模式：

射线与三角形网格检测：精确计算射线与物体表面三角形的交点
射线与包围盒检测：快速判断物体是否在射线路径范围内

核心API包括：

const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouseCoords, camera);
const intersects = raycaster.intersectObjects(scene.children);

二、基础实现流程详解

1. 坐标转换系统

鼠标屏幕坐标需转换为Three.js标准化坐标：

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

该转换将像素坐标映射到NDC（Normalized Device Coordinates）空间，范围[-1,1]。

2. 射线初始化与投射

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

3. 物体检测与结果处理

const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
  const selectedObj = intersects[0].object;
  // 处理选中物体
}

参数recursive设为true时，会检测子物体层级。

三、性能优化策略

1. 检测范围控制

通过intersectObject替代intersectObjects可提升单物体检测效率：

// 高效单物体检测
const targetObj = scene.getObjectByName('target');
const intersects = raycaster.intersectObject(targetObj);

2. 层级检测优化

对复杂场景实施分组检测：

const interactiveGroup = new THREE.Group();
// 将可交互物体添加到该组
const intersects = raycaster.intersectObjects(interactiveGroup.children);

3. 检测频率控制

实现节流机制避免频繁检测：

let isDetecting = false;
canvas.addEventListener('click', () => {
  if (isDetecting) return;
  isDetecting = true;
  requestAnimationFrame(() => {
    performRaycast();
    isDetecting = false;
  });
});

四、高级应用场景

1. 多物体同时检测

const intersects = raycaster.intersectObjects(scene.children);
intersects.forEach((intersect, index) => {
  if (index < 3) { // 只处理前3个交点
    intersect.object.material.emissive.setHex(0xff0000);
  }
});

2. 精确面选择

通过face属性获取具体被击中的三角形面：

const intersect = raycaster.intersectObjects(scene.children)[0];
const face = intersect.face;
const vertices = intersect.object.geometry.attributes.position;

3. 自定义检测逻辑

实现基于物体属性的过滤检测：

const interactiveObjs = scene.children.filter(obj => 
  obj.userData.isInteractive
);
const intersects = raycaster.intersectObjects(interactiveObjs);

五、常见问题解决方案

1. 检测失效问题

原因：相机未更新投影矩阵

解决：在resize事件中更新相机

window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});

2. 精度偏差问题

原因：未考虑物体缩放

解决：使用世界坐标检测

const worldMatrix = obj.matrixWorld;
const inverseMatrix = new THREE.Matrix4().invert(worldMatrix);
raycaster.ray.applyMatrix4(inverseMatrix);

3. 移动端适配

canvas.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  const mouse = {
    x: (touch.clientX / window.innerWidth) * 2 - 1,
    y: -(touch.clientY / window.innerHeight) * 2 + 1
  };
  // 后续检测逻辑
});

六、最佳实践建议

物体标记：为可交互物体添加userData.interactive = true标识

视觉反馈：实现悬停高亮效果

const hoverObj = null;
function onMouseMove(event) {
const mouse = getMouseCoords(event);
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (hoverObj) hoverObj.material.emissive.setHex(0x000000);
if (intersects.length > 0) {
 hoverObj = intersects[0].object;
 hoverObj.material.emissive.setHex(0x00ff00);
}
}

性能监控：使用THREE.Clock统计检测耗时

通过系统掌握Raycaster的原理与优化技巧，开发者能够构建出高效、稳定的三维交互系统。实际应用中，建议结合具体场景进行性能测试，根据物体复杂度、场景规模等因素调整检测策略。

Three.js进阶：掌握Raycaster实现精准鼠标拾取交互