学会Three.js鼠标交互：Raycaster精准拾取物体全解析

一、Raycaster的核心原理与作用

Raycaster（射线投射器）是Three.js中实现鼠标与3D场景交互的核心工具。其原理是通过从相机位置发射一条虚拟射线，检测射线与场景中物体的交点，从而确定用户点击或悬停的目标对象。这种非接触式检测方式避免了直接计算物体坐标的复杂性，尤其适合动态变化的3D场景。

1.1 射线投射的数学基础

Raycaster的底层逻辑基于向量运算。射线由起点（相机位置）和方向（归一化向量）定义，通过计算射线与物体包围盒（BoundingBox）或三角面的交点，判断是否命中。Three.js内置了高效的射线-三角面相交算法，开发者无需手动实现复杂数学。

1.2 适用场景

点击选中：用户点击3D模型时高亮或显示信息。
悬停提示：鼠标移近物体时显示工具提示。
拖拽交互：结合变换控件实现物体移动。
视线检测：判断视线是否被遮挡（如第一人称射击中的瞄准）。

二、Raycaster拾取物体的完整实现流程

2.1 初始化Raycaster与鼠标事件监听

import * as THREE from 'three';
// 初始化射线投射器
const raycaster = new THREE.Raycaster();
// 初始化鼠标位置向量（归一化设备坐标，范围[-1,1]）
const mouse = new THREE.Vector2();
// 监听鼠标点击事件
window.addEventListener('click', (event) => {
  // 将鼠标位置转换为归一化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 更新射线方向
  raycaster.setFromCamera(mouse, camera);
  // 执行拾取检测
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    console.log('选中的物体:', intersects[0].object);
  }
});

2.2 关键参数详解

setFromCamera(mouse, camera)：根据鼠标坐标和相机参数更新射线方向。
intersectObjects(objects)：检测射线与指定物体列表的交点，返回数组按距离排序。
intersectObject(object, recursive)：检测单个物体（recursive为true时检测子物体）。

2.3 性能优化策略

分层检测：对复杂场景，先检测粗略包围盒（如THREE.Box3），再精细检测。
物体分组：使用THREE.Groups组织物体，按需检测特定分组。
帧率控制：避免在requestAnimationFrame中频繁检测，可结合鼠标移动事件触发。

三、高级交互技巧与常见问题解决

3.1 拾取特定类型的物体

通过intersectObjects的过滤参数或手动遍历结果实现：

const meshes = scene.children.filter(child => child.isMesh);
const intersects = raycaster.intersectObjects(meshes);

3.2 处理透明物体与多重交点

透明物体可能导致射线多次相交，需通过intersects[0].face判断材质透明度或按距离排序后取第一个非透明交点。

3.3 拾取精度问题排查

相机投影矩阵未更新：确保在渲染循环中调用camera.updateProjectionMatrix()。
物体未添加到场景：检查scene.add(object)是否执行。
鼠标坐标归一化错误：验证mouse.x/y是否在[-1,1]范围内。

四、实战案例：3D产品展示交互

4.1 场景搭建

// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加立方体
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(cube);
camera.position.z = 5;

4.2 交互逻辑实现

// 高亮材质
const highlightMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
let selectedObject = null;
window.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects([cube]);
  if (intersects.length > 0) {
    if (selectedObject) {
      selectedObject.material = selectedObject.userData.originalMaterial;
    }
    selectedObject = intersects[0].object;
    selectedObject.userData.originalMaterial = selectedObject.material;
    selectedObject.material = highlightMaterial;
  }
});

五、扩展应用与最佳实践

5.1 结合OrbitControls实现复合交互

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
  // 相机移动时重新检测悬停物体
  detectHover();
});

5.2 移动端触摸支持

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

5.3 性能监控与调试

使用Chrome DevTools的Performance面板分析渲染耗时。
通过THREE.Clock统计检测耗时，确保单帧不超过16ms。

六、总结与进阶方向

Raycaster是Three.js交互的基石，掌握其原理后，可进一步探索：

物理引擎集成：结合Cannon.js或Ammo.js实现更真实的碰撞检测。
GPU加速：使用THREE.InstancedMesh时优化批量检测。
AR/VR扩展：在WebXR中实现基于视线射线的交互。

通过系统学习与实践，开发者能够高效实现复杂的3D交互场景，为用户提供沉浸式的Web体验。