【three.js】23. Raycaster and Mouse Events 投射射线（碰撞检测）和鼠标事件

// 引入three.js中的相关类
import {
  Raycaster,
  Vector2
} from 'three';
 
// 创建一个raycaster实例和一个二维向量用于存储鼠标位置
const raycaster = new Raycaster();
const mouse = new Vector2();
 
// 监听鼠标移动事件
window.addEventListener('mousemove', function(event) {
  // 将浏览器的2D鼠标位置转换为三维空间中的标准设备坐标(-1到+1)
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}, false);
 
// 监听鼠标点击事件
window.addEventListener('click', function() {
  // 将摄像机的透视投影投射到3D光线上
  raycaster.setFromCamera(mouse, camera);
 
  // 计算鼠标当前位置的所有物体
  const intersects = raycaster.intersectObjects(scene.children);
 
  // 如果有物体被投射线碰到
  if (intersects.length > 0) {
    // 取第一个碰到的物体
    const intersect = intersects[0];
 
    // 执行物体碰撞后的操作
    console.log('Clicked object:', intersect.object);
  }
}, false);

这段代码首先创建了一个Raycaster实例和一个Vector2实例，用于处理鼠标事件。然后，它监听了鼠标移动和点击事件，并在点击事件中使用Raycaster计算了鼠标位置的投射线与场景中所有物体的碰撞情况。如果有物体被投射线碰到，它会执行相应的操作。这个例子展示了如何在three.js中使用投射线进行碰撞检测和鼠标事件处理。