Raycaster 的用法

Raycaster 的用法

在 Three.js 中，Raycaster 是一个非常重要的工具，用于检测射线与场景中物体的交点。它可以用来实现点击交互、物体选择、碰撞检测等功能。以下是 Raycaster 的核心用法和常见问题的解决办法。

1. Raycaster 的基本用法

(1) 创建 Raycaster 实例

const raycaster = new THREE.Raycaster();

• Raycaster 对象用于定义一条射线，起始点和方向可以动态设置。

(2) 设置射线的方向

raycaster.setFromCamera(mouse, camera);

• setFromCamera 方法根据鼠标位置（NDC 坐标）和相机设置射线的方向。
• 参数：
  • mouse: 鼠标的归一化设备坐标 (Normalized Device Coordinates, NDC)，范围为 [-1, 1]。
  • camera: 当前使用的相机对象。

(3) 检测射线与物体的交点

const intersects = raycaster.intersectObjects(scene.children);

• intersectObjects 方法会返回射线与场景中物体的交点数组。
• 返回值是一个数组，每个元素包含以下信息：
  • object: 相交的物体。
  • point: 相交点的世界坐标。
  • distance: 射线起点到相交点的距离。
  • face: 相交的面（如果物体是网格）。
  • uv: 相交点的 UV 坐标。

(4) 处理交点

intersects.forEach((intersection) => {
   
  const object = intersection.object;
  if ('material' in object && object.material instanceof T