ThreeJs入门39：鼠标拾取物体全解析

在Three.js三维场景开发中，实现鼠标与物体的交互是构建沉浸式体验的关键环节。本文将系统讲解如何通过鼠标点击选中场景中的三维物体，从基础原理到高级优化，帮助开发者掌握这一核心技能。

一、鼠标拾取技术原理

鼠标拾取的本质是通过二维屏幕坐标反推三维空间中的交互对象。Three.js通过射线投射(Raycasting)技术实现这一过程：从相机位置出发，沿着鼠标点击方向发射一条无限延伸的射线，检测与场景中物体的相交情况。

1.1 坐标转换流程

1. 获取鼠标在屏幕上的归一化坐标(-1到1)
2. 将2D坐标转换为3D射线方向
3. 结合相机参数构建射线
4. 检测射线与物体的碰撞

1.2 核心类库

Three.js提供了Raycaster类专门处理射线投射：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

二、基础拾取实现步骤

2.1 鼠标事件监听

function onMouseClick(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);
    // 高亮显示选中物体
    highlightObject(intersects[0].object);
  }
}
window.addEventListener('click', onMouseClick, false);

2.2 关键参数说明

• setFromCamera()：根据鼠标坐标和相机参数更新射线
• intersectObjects()：检测与指定物体数组的相交情况
• 返回的intersects数组包含：
  • distance：射线起点到交点的距离
  • point：交点的三维坐标
  • object：被击中的物体

三、高级拾取技术

3.1 多层级拾取

处理复杂场景时，可指定特定层级进行检测：

// 只检测mesh类型的物体
const meshes = scene.children.filter(child => child.isMesh);
const intersects = raycaster.intersectObjects(meshes, true); // 第二个参数表示递归检测子物体

3.2 性能优化策略

1. 空间分区：对大规模场景使用八叉树或BVH加速结构
2. 检测范围限制：只检测视锥体内的物体
3. 频率控制：对移动端设备限制检测频率

3.3 精确度提升技巧

• 使用THREE.PerspectiveCamera的updateProjectionMatrix()确保投影矩阵最新
• 对高精度需求场景，可调整射线细分精度：

  raycaster.params.Line.threshold = 0.1; // 调整线段的检测阈值

四、实际应用案例

4.1 物体选择高亮

let selectedObject = null;
function highlightObject(object) {
  // 移除之前的高亮
  if (selectedObject) {
    selectedObject.material.emissive.setHex(0x000000);
  }
  // 应用新高亮
  selectedObject = object;
  if (object.material) {
    object.material.emissive.setHex(0xffff00);
  }
}

4.2 拖拽交互实现

let selectedObject = null;
let offset = new THREE.Vector3();
function onMouseDown(event) {
  // ...拾取代码同上...
  if (intersects.length > 0) {
    selectedObject = intersects[0].object;
    // 计算鼠标与物体中心的偏移量
    const intersectPoint = intersects[0].point;
    const box = new THREE.Box3().setFromObject(selectedObject);
    const center = box.getCenter(new THREE.Vector3());
    offset.subVectors(intersectPoint, center);
  }
}
function onMouseMove(event) {
  if (selectedObject) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersectPoint = raycaster.intersectObject(groundPlane)[0].point;
    selectedObject.position.copy(intersectPoint.sub(offset));
  }
}
function onMouseUp() {
  selectedObject = null;
}

五、常见问题解决方案

5.1 拾取不准确问题

• 检查相机是否更新updateProjectionMatrix()
• 确认物体是否在视锥体内
• 调整Raycaster的near和far参数

5.2 移动端适配

// 触摸事件处理
function onTouchStart(event) {
  const touch = event.touches[0];
  const mouseEvent = new MouseEvent('click', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  onMouseClick(mouseEvent);
}

5.3 透明物体检测

对透明物体需要特殊处理：

// 创建可检测的透明材质
const transparentMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide
});
// 或者在检测时临时修改材质
function intersectTransparent(object) {
  const originalMaterial = object.material;
  object.material = new THREE.MeshBasicMaterial({color: 0xff0000});
  const intersects = raycaster.intersectObject(object);
  object.material = originalMaterial;
  return intersects;
}

六、最佳实践建议

1. 场景预处理：对静态场景预先构建加速结构
2. 层级管理：将交互物体单独分组管理
3. 视觉反馈：提供明确的选中状态视觉提示
4. 性能监控：使用THREE.Clock()监测检测耗时

通过系统掌握这些技术要点，开发者可以高效实现Three.js场景中的鼠标交互功能。实际应用中，建议从简单场景开始实践，逐步增加复杂度，最终构建出流畅的三维交互体验。