【Threejs】【工具类】Raycaster实现 3D 交互（如鼠标拾取、碰撞检测）的核心工具

new THREE.Raycaster() 是 Three.js 库中用于创建射线投射器（Raycaster）的构造函数，主要用于检测 3D 空间中射线与物体的相交关系，是实现 3D 交互（如鼠标拾取、碰撞检测）的核心工具。

核心作用

射线投射器的本质是在 3D 空间中发射一条"不可见的射线"，并计算这条射线与场景中哪些物体（或物体的三角形面）相交，返回相交信息（如相交点、距离、所在物体等）。

最典型的应用场景是**"鼠标拾取"**：通过鼠标在屏幕上的位置，创建一条从相机出发穿过该屏幕点的射线，检测射线与哪些 3D 物体相交，从而实现"点击选中 3D 物体"的交互效果。

工作原理

创建射线：根据屏幕坐标（如鼠标位置）和相机参数，生成一条从相机位置出发，穿过屏幕点的 3D 射线。
检测相交：将射线与场景中的物体进行碰撞检测，返回所有相交的物体及详细信息（按距离相机由近到远排序）。
处理结果：根据相交信息实现交互逻辑（如选中物体变色、显示信息等）。

基本使用流程

javascript 复制代码

// 1. 创建射线投射器和鼠标向量（存储屏幕坐标）
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 2. 监听鼠标移动/点击事件，更新鼠标向量（标准化到 [-1, 1] 范围）
function onMouseMove(event) {
  // 将屏幕坐标转换为 Three.js 所需的标准化设备坐标 (NDC)
  // 范围：x 从 -1（左）到 1（右），y 从 -1（下）到 1（上）
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
window.addEventListener('mousemove', onMouseMove);

// 3. 在渲染循环中检测射线与物体的相交
function render() {
  // 更新射线：从相机位置出发，穿过鼠标对应的屏幕点
  raycaster.setFromCamera(mouse, camera);

  // 检测射线与场景中物体的相交（参数为待检测的物体数组）
  const intersects = raycaster.intersectObjects(scene.children);

  // 处理相交结果（例如：第一个相交物体为最近的物体）
  if (intersects.length > 0) {
    console.log('选中的物体：', intersects[0].object);
    console.log('相交点坐标：', intersects[0].point);
  }

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

关键方法与属性

raycaster.setFromCamera(mouse, camera)：根据鼠标标准化坐标和相机，更新射线的起点和方向。
raycaster.intersectObjects(objects, recursive)：检测射线与物体数组的相交，recursive 为 true 时会检测子物体。
相交结果 intersects 数组中的元素包含：
- object：相交的物体
- point：3D 空间中的相交点坐标
- distance：射线起点到相交点的距离
- face：相交的三角形面（网格物体）

常见应用场景

鼠标点击选中 3D 物体（如游戏中选择角色、场景中点击按钮）
鼠标悬停高亮物体（如交互提示）
碰撞检测（如射线检测子弹是否击中目标）
3D 空间中的拖拽操作（根据射线与物体的交点更新位置）

总之，THREE.Raycaster 是连接 2D 屏幕交互与 3D 场景物体的"桥梁"，是 Three.js 交互开发中不可或缺的工具。