【Threejs】【工具类】Raycaster实现 3D 交互（如鼠标拾取、碰撞检测）的核心工具
new THREE.Raycaster() 是 Three.js 库中用于创建射线投射器（Raycaster）的构造函数，主要用于检测 3D 空间中射线与物体的相交关系，是实现 3D 交互（如鼠标拾取、碰撞检测）的核心工具。
核心作用
射线投射器的本质是在 3D 空间中发射一条“不可见的射线”，并计算这条射线与场景中哪些物体（或物体的三角形面）相交，返回相交信息（如相交点、距离、所在物体等）。
最典型的应用场景是**“鼠标拾取”**：通过鼠标在屏幕上的位置，创建一条从相机出发穿过该屏幕点的射线，检测射线与哪些 3D 物体相交，从而实现“点击选中 3D 物体”的交互效果。
工作原理
- 创建射线：根据屏幕坐标（如鼠标位置）和相机参数，生成一条从相机位置出发，穿过屏幕点的 3D 射线。
- 检测相交：将射线与场景中的物体进行碰撞检测，返回所有相交的物体及详细信息（按距离相机由近到远排序）。
- 处理结果：根据相交信息实现交互逻辑（如选中物体变色、显示信息等）。
基本使用流程
// 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 交互开发中不可或缺的工具。