threejs怎么给立方体添加鼠标移入事件

在Three.js中，要为立方体添加鼠标移入事件，你需要先创建一个立方体模型，然后绑定一个`raycaster`对象用于检测鼠标点击，以及一个`hoveredMesh`变量来存储当前被鼠标悬停的网格物体。以下是简单的步骤：

1. **创建立方体**：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 将立方体添加到场景中

2. **初始化`raycaster`和`hoveredMesh`**：

const raycaster = new THREE.Raycaster();
let hoveredMesh = null;

3. **监听鼠标移动事件**：

function onDocumentMouseMove(event) {
  event.preventDefault(); // 阻止浏览器默认滚动行为

  const mouse = { x: (event.clientX / window.innerWidth) * 2 - 1, y: -(event.clientY / window.innerHeight) * 2 + 1 };
  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    hoveredMesh = intersects[0].object; // 如果有交集，更新hoveredMesh
  } else {
    hoveredMesh = null; // 没有交集则设置为null
  }

  updateHoverEffect(hoveredMesh); // 更新悬浮效果
}

document.addEventListener('mousemove', onDocumentMouseMove);

4. **自定义`updateHoverEffect`函数**：这个函数可以根据需要改变立方体的颜色、大小或其他视觉反馈，当鼠标离开立方体贴合的地方时，将`hoveredMesh`设回`null`。

注意：这里只是一个基础示例，实际项目中可能还需要考虑性能优化，如只对可见区域进行碰撞检测等。