文章

# 在 Three.js 中实现物体点击

Three.js 是一款强大的基于 WebGL 的 3D 库，设计目标是让 WebGL 的使用变得更简单。它提供了丰富的功能，如场景、光照、纹理、动画以及对多种 3D 文件格式的支持。然而，在这篇博客中，我们要专注于一个重要的交互功能 - 在 Three.js 中实现物体点击。

### **创建射线投射器**

射线投射器（Raycaster）是 Three.js 提供的一个用于检测鼠标点击或触摸事件在3D空间中的位置的对象。基本上，当用户点击屏幕时，我们可以用射线投射器发射一条从摄像机开始，穿过鼠标点击位置并进入3D空间的射线。

Language
Copy code
```javascript
let raycaster = new THREE.Raycaster();
```

### **监听鼠标事件**

我们需要监听 `click` 或 `mousedown` 事件来确定用户何时点击屏幕。这可以通过使用 JavaScript 的 `addEventListener` 方法来实现。

Language
Copy code
```javascript
window.addEventListener('click', onDocumentMouseClick, false);

function onDocumentMouseClick(event) {
  // 事件处理逻辑
}
```

### **转换鼠标点击位置**

鼠标的点击位置是在2D屏幕坐标系中的，而 WebGL 使用的是不同的坐标系统。WebGL 的坐标系统的中心点 (0, 0) 位于屏幕中心，而鼠标坐标系统中，左上角为 (0, 0)。因此，我们需要将鼠标点击位置从屏幕坐标转换为 WebGL 坐标。

Language
Copy code
```javascript
let mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
```

### **使用射线投射器进行碰撞检测**

现在，我们可以用 `raycaster` 对象的 `setFromCamera` 方法设置射线的起始点，然后使用 `intersectObjects` 方法检查射线与场景中的哪些物体相交。这个方法将返回一个数组，包含所有射线穿过的物体。

Language
Copy code
```javascript
raycaster.setFromCamera(mouse, camera);
let intersects = raycaster.intersectObjects(scene.children);
```

### **处理碰撞结果**

`intersectObjects` 返回的数组中的元素按照射线与物体交点的距离进行排序，最近的物体在数组的最前面。因此，如果你想要获取被点击的物体，只需要取数组的第一个元素即可。

Language
Copy code
```javascript
if (intersects.length > 0) {
  let firstObject = intersects[0].object;
  // 对被点击的物体进行操作
}
```

这就是在 Three.js 中实现物体点击的基本步骤。需要注意的是，射线投

射器的性能并不高，如果场景中的物体数量很多，可能会导致性能问题。为了解决这个问题，你可以试着只对某些特定的物体进行碰撞检测，或者在物体的数量超过一定限制时，使用分层渲染等技术。

总的来说，通过 Three.js 的射线投射器，我们可以轻松实现3D空间中的物体点击交互，这无疑为我们的3D应用带来了更多的可能性。