Three.js中如何选中物体？

在Three.js的3D场景开发中，物体选中是构建交互式应用的核心功能。无论是游戏、可视化工具还是教育软件，用户都需要通过点击、拖拽或悬停与3D模型交互。本文将从基础原理到进阶技巧，系统解析Three.js中实现物体选中的完整方法，并提供可落地的代码示例。

一、射线检测（Raycasting）：核心选中机制

射线检测是Three.js中最常用的选中方法，其原理是通过模拟一条从相机出发、穿过鼠标位置的射线，检测与场景中物体的交点。

1.1 基础实现步骤

1. 创建射线投射器（Raycaster）：

   const raycaster = new THREE.Raycaster();

2. 获取鼠标位置并归一化：

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

3. 更新射线方向：

   const mousePos = getMousePos(renderer.domElement, event);
   raycaster.setFromCamera(mousePos, camera);

4. 检测相交物体：

   const intersects = raycaster.intersectObjects(scene.children);
   if (intersects.length > 0) {
     const selectedObj = intersects[0].object;
     console.log('选中的物体:', selectedObj);
   }

1.2 性能优化技巧

• 限制检测范围：仅检测需要交互的物体，而非整个场景：

  const interactableObjs = scene.children.filter(obj => obj.userData.isInteractable);
  const intersects = raycaster.intersectObjects(interactableObjs);

• 使用层级结构（Layers）：通过camera.layers和object.layers控制检测范围，减少不必要的计算。

• 空间分区优化：对于大规模场景，使用八叉树（Octree）或BVH（Bounding Volume Hierarchy）加速检测。

二、交互事件系统：封装与扩展

Three.js本身不提供内置的事件系统，但可以通过封装实现类似DOM的事件机制。

2.1 基础事件封装

class InteractiveObject extends THREE.Mesh {
  constructor(geometry, material) {
    super(geometry, material);
    this.userData.isInteractable = true;
    this.on = {
      click: [],
      hover: []
    };
  }
  addEventListener(type, callback) {
    this.on[type].push(callback);
  }
  dispatchEvent(type, event) {
    this.on[type].forEach(cb => cb(event));
  }
}
// 使用示例
const cube = new InteractiveObject(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
cube.addEventListener('click', () => console.log('点击了立方体'));

2.2 集成射线检测的事件系统

function handleMouseClick(event) {
  const mousePos = getMousePos(renderer.domElement, event);
  raycaster.setFromCamera(mousePos, camera);
  const intersects = raycaster.intersectObjects(scene.children.filter(obj => obj.userData.isInteractable));
  if (intersects.length > 0) {
    const selectedObj = intersects[0].object;
    selectedObj.dispatchEvent('click', { position: intersects[0].point });
  }
}
// 绑定事件
document.addEventListener('click', handleMouseClick);

三、高级选中技术：多物体与复杂场景

3.1 多物体选中

function selectMultipleObjects(event) {
  const mousePos = getMousePos(renderer.domElement, event);
  raycaster.setFromCamera(mousePos, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  // 选中所有相交的物体（而非仅第一个）
  const selectedObjs = intersects.map(intersect => intersect.object);
  console.log('选中的物体列表:', selectedObjs);
}

3.2 穿透选中（忽略中间物体）

通过设置raycaster.params的Threshold参数控制穿透距离：

raycaster.params.Mesh.threshold = 0.1; // 仅检测距离小于0.1单位的物体

3.3 选中优先级控制

为物体添加userData.selectPriority属性，按优先级排序：

const intersects = raycaster.intersectObjects(scene.children);
intersects.sort((a, b) => 
  (b.object.userData.selectPriority || 0) - (a.object.userData.selectPriority || 0)
);

四、实用技巧与常见问题

4.1 选中高亮效果

通过修改材质颜色实现高亮：

let originalMaterial;
function highlightObject(obj) {
  originalMaterial = obj.material;
  obj.material = new THREE.MeshBasicMaterial({ 
    color: 0xffff00,
    transparent: true,
    opacity: 0.7
  });
}
function unhighlightObject(obj) {
  if (originalMaterial) {
    obj.material = originalMaterial;
  }
}

4.2 移动端适配

处理触摸事件：

function handleTouch(event) {
  event.preventDefault();
  const touch = event.touches[0];
  const mouseEvent = new MouseEvent('click', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  handleMouseClick(mouseEvent);
}
document.addEventListener('touchstart', handleTouch);

4.3 性能监控

使用THREE.Clock监控帧率，避免因频繁射线检测导致卡顿：

const clock = new THREE.Clock();
let lastRaycastTime = 0;
function animate() {
  const delta = clock.getDelta();
  if (delta > 0.016) { // 限制每秒最多60次检测
    lastRaycastTime = Date.now();
    // 执行射线检测...
  }
  requestAnimationFrame(animate);
}

五、完整示例代码

// 初始化场景、相机、渲染器
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 InteractiveObject(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
cube.position.set(0, 0, -5);
cube.addEventListener('click', () => console.log('立方体被点击'));
scene.add(cube);
const sphere = new InteractiveObject(
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
sphere.position.set(2, 0, -5);
sphere.addEventListener('click', () => console.log('球体被点击'));
scene.add(sphere);
camera.position.z = 5;
// 射线检测逻辑
const raycaster = new THREE.Raycaster();
function onMouseClick(event) {
  const mousePos = getMousePos(renderer.domElement, event);
  raycaster.setFromCamera(mousePos, camera);
  const intersects = raycaster.intersectObjects([cube, sphere]);
  if (intersects.length > 0) {
    const selectedObj = intersects[0].object;
    selectedObj.dispatchEvent('click');
    highlightObject(selectedObj);
  }
}
document.addEventListener('click', onMouseClick);
// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

总结

Three.js中的物体选中技术涉及射线检测、事件系统封装、性能优化等多个层面。开发者应根据项目需求选择合适的方法：

1. 简单场景：直接使用Raycaster.intersectObjects()
2. 复杂交互：封装事件系统实现模块化
3. 大规模场景：结合空间分区与层级控制

通过合理应用这些技术，可以构建出高效、流畅的3D交互应用。