## Three.js 鼠标交互### 简介在 Three.js 中实现鼠标交互可以让用户以更加直观和自然的方式与 3D 场景进行互动。这篇文章将详细介绍如何使用 Three.js 实现鼠标交互，包括：

射线投射:

检测鼠标点击与场景中物体的碰撞

事件监听:

监听鼠标事件，例如点击、移动和滚轮

对象选择:

根据鼠标点击选择场景中的物体

拖拽控制:

使用鼠标拖拽场景中的物体### 一、 射线投射 (Raycasting)射线投射是实现鼠标交互的基础，它可以用来检测鼠标点击的位置是否与场景中的物体相交。Three.js 提供了 `Raycaster` 对象来实现射线投射。#### 1. 创建 `Raycaster` 对象```js const raycaster = new THREE.Raycaster(); ```#### 2. 设置射线起点和方向```js // 获取鼠标位置，并将其归一化到 [-1, 1] 的范围内 const mouse = new THREE.Vector2(); mouse.x = (event.clientX / window.innerWidth)

2 - 1; mouse.y = -(event.clientY / window.innerHeight)

2 + 1;// 使用鼠标位置更新射线起点和方向 raycaster.setFromCamera(mouse, camera); ```#### 3. 进行射线投射```js // 获取与射线相交的对象数组 const intersects = raycaster.intersectObjects(scene.children);// 判断是否有物体与射线相交 if (intersects.length > 0) {// 获取第一个相交的物体const intersectedObject = intersects[0].object;// 处理交互逻辑console.log('鼠标点击了:', intersectedObject); } ```### 二、 事件监听Three.js 使用浏览器的原生事件系统来监听鼠标事件。#### 1. 添加事件监听器```js // 监听鼠标点击事件 window.addEventListener('click', onMouseClick, false);// 监听鼠标移动事件 window.addEventListener('mousemove', onMouseMove, false); ```#### 2. 事件处理函数```js function onMouseClick(event) {// 处理鼠标点击事件 }function onMouseMove(event) {// 处理鼠标移动事件 } ```### 三、 对象选择结合射线投射和事件监听，我们可以实现根据鼠标点击选择场景中的物体。```js let selectedObject = null;function onMouseClick(event) {// ... 射线投射代码 ...if (intersects.length > 0) {selectedObject = intersects[0].object;// 对选中的物体进行操作，例如改变颜色selectedObject.material.color.set(0xff0000);} } ```### 四、 拖拽控制使用 `DragControls` 可以方便地实现拖拽场景中的物体。#### 1. 引入 `DragControls````js import { DragControls } from 'three/examples/jsm/controls/DragControls'; ```#### 2. 初始化 `DragControls````js const controls = new DragControls(objects, camera, renderer.domElement); ```#### 3. 事件处理```js // 监听拖拽开始事件 controls.addEventListener('dragstart', function (event) {// ... });// 监听拖拽结束事件 controls.addEventListener('dragend', function (event) {// ... }); ```### 总结本文介绍了 Three.js 中实现鼠标交互的基本方法，包括射线投射、事件监听、对象选择和拖拽控制。你可以根据实际需求，组合使用这些方法来创建各种交互体验。

标签: threejs鼠标交互