THREE.Raycaster 射线投射

阅读数:4 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

THREE.Raycaster 是基于射线的碰撞检测工具，它通过在场景中从一个起点沿某个方向发射射线，来判断射线是否与 3D 场景中的物体发生碰撞。它非常适用于与物体交互或实现射线检测的功能。

二、属性

ray (THREE.Ray): 射线对象，表示射线的起点和方向。这个属性本身是一个 THREE.Ray 对象，具有 origin（起点）和 direction（方向）两个属性。
- ray.origin：射线的起点，类型是 THREE.Vector3。
- ray.direction：射线的方向，类型是 THREE.Vector3，必须是单位向量。
far (number): 射线的最大长度。默认值是 Infinity。它决定了射线在多远的范围内进行碰撞检测。如果没有碰撞，射线会在 far 这个距离后停止。
near (number): 射线的最小长度。默认值是 0。通常用来防止射线从起点很近的位置与物体交叉。
linePrecision (number): 用来确定射线与物体交点的精度。默认值是 0.1，表示在检测交点时的容忍误差。较大的值可能会导致检测不准确。
params (object): 一个对象，可以用来指定射线与物体相交时的具体测试条件。常见的参数包括 Mesh（默认）、Line、Points 等。

二、方法

intersectObject(object, recursive) (Array): 检测射线与单个物体的交集。返回射线与物体相交的点的信息数组。如果没有交点，返回空数组。
- 参数：
  - object：要检测的物体。
  - recursive（可选）：是否递归检查物体的子物体（默认为 false）。
- 返回值：一个数组，包含与射线相交的物体、交点等信息。
intersectObjects(objects, recursive) (Array): 检测射线与多个物体的交集，返回所有交集点的数组。与 intersectObject 类似，但它会返回射线与多个物体的交集。
- 参数：
  - objects：物体的数组。
  - recursive（可选）：是否递归检查每个物体的子物体（默认为 false）。
- 返回值：一个数组，包含与射线相交的物体信息。数组会按照离射线起点最近的物体排序。
update(): 更新射线的起点和方向。这个方法在 THREE.Raycaster 内部会自动调用，但如果你在使用 THREE.Raycaster 时修改了 ray.origin 或 ray.direction，你可以手动调用此方法来确保射线的最新状态。

三、射线与物体交点的返回值

intersectObject 或 intersectObjects 返回的数组中的每个元素是一个交点信息对象。该对象的常见属性包括：

distance (number): 射线与物体交点的距离，单位为世界坐标系下的距离。
point (THREE.Vector3): 交点的具体位置（即射线与物体相交的点），是一个 THREE.Vector3 对象。
face (THREE.Face3): 如果交点发生在一个 THREE.Geometry 上，返回交点的面信息。
object (THREE.Object3D): 发生交点的物体（即被射线击中的物体）。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
  // 计算鼠标在NDC空间中的位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线的起点和方向（将鼠标位置转换为射线）
  raycaster.update(camera.position, mouse);

  // 获取与场景中物体的交集
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    console.log('碰撞到物体：', intersects[0].object);
  }
});

四、setFromCamera方法

raycaster.setFromCamera(mouse, camera);

mouse (THREE.Vector2):
这是一个表示鼠标位置的二维向量，使用 标准化设备坐标 (NDC) 来表示，NDC 的坐标范围是 [-1, 1]。
- mouse.x：鼠标在屏幕上的 x 坐标，范围是 [-1, 1]。
- mouse.y：鼠标在屏幕上的 y 坐标，范围是 [-1, 1]。
你通常需要通过浏览器的事件来获取鼠标的屏幕坐标，然后将它们转换成 NDC。
camera (THREE.Camera):
这是相机对象（如 THREE.PerspectiveCamera 或 THREE.OrthographicCamera），它定义了场景中的观察视角。setFromCamera 会用这个相机来进行投射计算，决定射线的方向和位置