three Ray 射线

231 阅读6分钟

THREE.Ray 是一个强大的工具,可以用于各种空间计算,如碰撞检测、光线投射等。通过与 THREE.Vector3 和其他几何体的结合使用,可以高效地处理射线相关的数学问题。

Ray 有两个属性二十个方法

Ray( origin : Vector3, direction : Vector3 ) origin - (可选)Ray(射线)的原点,默认值是一个位于(0, 0, 0)的Vector3。 direction - Vector3 Ray(射线)的方向。该向量必须经过标准化(使用Vector3.normalize),这样才能使方法正常运行。 默认值是一个位于(0, 0, -1)的Vector3。 创建一个新的Ray。 属性

  • origin : Vector3 Ray(射线)的原点,默认值是一个位于(0, 0, 0)的Vector3。
  • direction : Vector3 Ray(射线)的方向。该向量必须经过标准化(使用Vector3.normalize),这样才能使方法正常运行。 默认值是一个位于(0, 0, -1)的Vector3。 方法
  • applyMatrix4 ( matrix4 : Matrix4 ) : this 在 Three.js 中,Ray 类的 applyMatrix4 方法用于将一个 4x4 矩阵(THREE.Matrix4)应用到射线(THREE.Ray)上,从而变换射线的起点和方向。这对于在不同坐标空间中处理射线非常有用,例如当你需要在物体的局部空间和全局空间之间转换时。
    // 创建一个射线
    const ray = new THREE.Ray(
        new THREE.Vector3(1, 1, 1), // 起点
        new THREE.Vector3(0, 0, -1) // 方向
    );
    // 创建一个 4x4 矩阵(例如,一个平移变换矩阵)
    const matrix = new THREE.Matrix4();
    matrix.makeTranslation(2, 3, 4); // 平移向量 (2, 3, 4)
    // 应用矩阵到射线
    ray.applyMatrix4(matrix);
    // 输出变换后的射线
    console.log('变换后的起点:', ray.origin); // 变换后的起点 { "x": 3, "y": 4, "z": 5 }
    console.log('变换后的方向:', ray.direction); // 方向保持不变 { "x": 0, "y": 0, "z": -1 }
  • at ( t : Float, target : Vector3 ) : Vector3 在 Three.js 中,at 方法通常与射线(THREE.Ray)相关,用于计算射线在给定参数 t 下的点位置。这个方法可以用于找到从射线的起点沿着射线方向延伸 t 单位后的点。
    // 创建一个射线
    const ray = new THREE.Ray(
        new THREE.Vector3(1, 1, 1), // 起点
        new THREE.Vector3(0, 0, -1).normalize() // 方向(需要归一化)
    );
    // 定义一个目标向量来存储计算结果
    const target = new THREE.Vector3();
    // 使用 at 方法计算在 t=5 时的点
    ray.at(5, target);
    // 输出结果
    console.log('射线在 t=5 时的位置:', target); 
    // 输出: Vector3 { x: 1, y: 1, z: -4 }
  • clone () : Ray 创建一个新的和这个Ray具有相同origin和direction的Ray。
  • closestPointToPoint ( point : Vector3, target : Vector3 ) : Vector3 point - 获得距离射线上的点最接近的点。 target — 结果将复制到这一Vector3中。 沿着Ray,获得与所传入Vector3最接近的点
  • copy ( ray : Ray ) : this 复制所传入Ray的origin和direction属性到这个Ray上。
  • distanceSqToPoint ( point : Vector3 ) : Float point - 将被用于计算到其距离的 Vector3。 获得Ray与传入的Vector3之间最近的距离。
    // 创建一个射线
    const ray = new THREE.Ray(
        new THREE.Vector3(1, 1, 1), // 射线的起点
        new THREE.Vector3(0, 0, -1).normalize() // 射线的方向
    );
    // 定义一个目标点
    const point = new THREE.Vector3(2, 2, -2);
    // 计算射线起点到目标点的距离
    const distanceSquared = ray.distanceSqToPoint(point);
    console.log('射线起点到目标点的距离:', distanceSquared); // 2
  • distanceSqToSegment ( v0 : Vector3, v1 : Vector3, optionalPointOnRay : Vector3, optionalPointOnSegment : Vector3 ) : Float v0 - 线段的起点。 v1 - 线段的终点。 optionalPointOnRay - (可选)若这个值被给定,它将接收在Ray(射线)上距离线段最近的点。 optionalPointOnSegment - (可选)若这个值被给定,它将接收在线段上距离Ray(射线)最近的点。
    // 创建一个射线
    const ray = new THREE.Ray(
        new THREE.Vector3(1, 1, 1), // 射线的起点
        new THREE.Vector3(0, 0, -1).normalize() // 射线的方向
    );
    // 定义线段的两个端点
    const v0 = new THREE.Vector3(2, 2, -2);
    const v1 = new THREE.Vector3(2, 2, -5);
    // 可选参数用于存储最近点
    const pointOnRay = new THREE.Vector3();
    const pointOnSegment = new THREE.Vector3();
    // 计算射线到线段的平方距离
    const distanceSquared = ray.distanceSqToSegment(v0, v1, pointOnRay, pointOnSegment);
    console.log('射线到线段的距离:', distanceSquared);// 射线到线段的距离: 2
    console.log('射线上最近点:', pointOnRay); // { "x": 1, "y": 1, "z": -5 }
    console.log('线段上最近点:', pointOnSegment); // { "x": 2, "y": 2, "z": -5 }
  • distanceToPlane ( plane : Plane ) : Float plane - 将要获取射线原点到该平面的距离的平面。 获取射线原点(origin)到平面(Plane)之间的距离。若射线(Ray)不与平面(Plane)相交,则将返回null。
    // 创建射线和法线
    const ray = new THREE.Ray(new THREE.Vector3(1, 1, 1), new THREE.Vector3(0, -1, 0));
    const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // y = 0 的平面
    // 计算距离
    const distance = ray.distanceToPlane(plane);
    console.log(distance); // 输出: 1
  • distanceToPoint ( point : Vector3 ) : Float distanceToPoint 方法用于计算一条射线(Ray)到一个指定点(Point)之间的距离。这个距离是从射线的起点到指定点的最短距离。
    // 创建射线和目标点
    const ray = new THREE.Ray(new THREE.Vector3(1, 1, 1), new THREE.Vector3(0, 0, -1));
    const point = new THREE.Vector3(4, 5, 6);
    // 计算距离
    const distance = ray.distanceToPoint(point);
    console.log(distance); // 输出: 7.0710678118654755
  • equals ( ray : Ray ) : Boolean ray - 用于比较的Ray。 如果所传入的ray具有和当前Ray相同的origin和direction则返回true。
  • intersectBox ( box : Box3, target : Vector3 ) : Vector3 box - 将会与之相交的Box3。 target — 结果将会被复制到这一Vector3中。将Ray(射线)与一个Box3相交,并返回交点,倘若没有交点将返回null。
  • intersectPlane ( plane : Plane, target : Vector3 ) : Vector3 plane - 将会与之相交的Plane。 target — 结果将会被复制到这一Vector3中。 将Ray(射线)与一个Plane相交,并返回交点,倘若没有交点将返回null。
  • intersectSphere ( sphere : Sphere, target : Vector3 ) : Vector3 sphere - 将会与之相交的Sphere。 target — 结果将会被复制到这一Vector3中。 将Ray(射线)与一个Sphere(球)相交,并返回交点,倘若没有交点将返回null。
  • intersectTriangle ( a : Vector3, b : Vector3, c : Vector3, backfaceCulling : Boolean, target : Vector3 ) : Vector3 a, b, c - 组成三角形的三个Vector3。 backfaceCulling - 是否使用背面剔除。 target — 结果将会被复制到这一Vector3中。 将Ray(射线)与一个三角形相交,并返回交点,倘若没有交点将返回null。
  • intersectsBox ( box : Box3 ) : Boolean box - 将被检查是否与之相交的Box3。 若这一射线与Box3相交,则将返回true。
  • intersectsPlane ( plane : Plane ) : Boolean plane - 将被检查是否与之相交的Plane。 若这一射线与Plane相交,则将返回true。
  • intersectsSphere ( sphere : Sphere ) : Boolean sphere - 将被检查是否与之相交的Sphere。 若这一射线与Sphere相交,则将返回true。
  • lookAt ( v : Vector3 ) : this v - 将要“直视”的Vector3 调整光线的方向到世界坐标中该向量所指代的点。
  • recast ( t : Float ) : this t - 沿着Ray进行插值的距离。 将Ray(射线)的原点沿着其方向移动给定的距离。
  • set ( origin : Vector3, direction : Vector3 ) : this origin - Ray(射线)的origin(原点)。 direction - Ray(射线)的direction(方向)。 该向量必须经过标准化(使用Vector3.normalize),这样才能使方法正常运行。