ThreeJS入门（079）：THREE.Ray 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 079篇入门文章

THREE.Ray 是 Three.js 中用于表示三维空间中的一条射线的一个类。射线是从一个点出发，沿着一个方向无限延伸的几何对象。在三维计算机图形学中，射线通常用于实现诸如光线追踪、碰撞检测等功能。

构造函数

构造函数 new THREE.Ray(origin, direction) 接受两个参数来定义一条射线。

参数说明

• origin：一个 THREE.Vector3 对象，表示射线的起点。
• direction：一个 THREE.Vector3 对象，表示射线的方向。

如果未提供 origin 和 direction 参数，构造函数将创建一条默认的射线，其中起点为 (0, 0, 0)，方向为 (0, 0, 1)。

属性

THREE.Ray 的实例拥有如下属性：

• origin：一个 THREE.Vector3 对象，表示射线的起点。
• direction：一个 THREE.Vector3 对象，表示射线的方向。

方法

THREE.Ray 提供了以下常用的方法来操作和查询射线：

• set(origin, direction)：设置射线的起点和方向。
• clone()：返回一个新的 Ray 实例，其值与当前射线相同。
• copy(ray)：将另一个射线对象的值复制到当前射线对象。
• at(t, target)：根据参数 t （范围在 [0, +∞) 之间）计算射线上的点，并将结果存储在 target 向量中。
• closestPointToPoint(point, target)：计算射线到指定点的最近点，并将结果存储在 target 向量中。
• distanceToPoint(point)：计算射线到指定点的最短距离。
• distanceSqToPoint(point)：计算射线到指定点的最短距离的平方。
• distanceToSegment(ray, pointA, pointB, pointOnRay, pointOnSegment)：计算射线到另一条射线或线段的最短距离。
• distanceSqToSegment(ray, pointA, pointB, pointOnRay, pointOnSegment)：计算射线到另一条射线或线段的最短距离的平方。
• intersectSphere(sphere, target)：计算射线与球体的交点，并将结果存储在 target 向量中。
• intersectsSphere(sphere)：判断射线是否与球体相交。
• intersectBox(box, target)：计算射线与轴对齐包围盒的交点，并将结果存储在 target 向量中。
• intersectsBox(box)：判断射线是否与轴对齐包围盒相交。
• intersectTriangle(a, b, c, backfaceCulling, target)：计算射线与三角形的交点，并将结果存储在 target 向量中。
• intersectsTriangle(a, b, c, backfaceCulling)：判断射线是否与三角形相交。
• applyMatrix4(matrix)：将一个 THREE.Matrix4 矩阵应用到射线上。
• equals(ray)：检查当前射线是否等于另一个射线。
• fromArray(array)：从数组中设置射线。
• toArray(array, offset)：将射线的起点和方向转换为数组。

示例

创建一个基本的 Ray 对象：

const origin = new THREE.Vector3(0, 0, 0);
const direction = new THREE.Vector3(0, 0, 1);
const ray = new THREE.Ray(origin, direction);

创建一条射线并设置起点和方向：

const ray = new THREE.Ray();
ray.set(new THREE.Vector3(1, 2, 3), new THREE.Vector3(0, 0, 1)); // 设置起点和方向

计算射线上的一个点：

const t = 1; // 参数 t 为 1
const pointOnRay = new THREE.Vector3();
ray.at(t, pointOnRay);
console.log(pointOnRay.x, pointOnRay.y, pointOnRay.z); // 输出 (1, 2, 4)

计算射线到指定点的最近点：

const point = new THREE.Vector3(1, 2, 4);
const closestPoint = new THREE.Vector3();
ray.closestPointToPoint(point, closestPoint);
console.log(closestPoint.x, closestPoint.y, closestPoint.z); // 输出 (1, 2, 4)

计算射线到指定点的最短距离：

const point = new THREE.Vector3(1, 2, 4);
console.log(ray.distanceToPoint(point)); // 输出 0

计算射线与球体的交点：

const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 10), 5);
const intersectionPoint = new THREE.Vector3();
ray.intersectSphere(sphere, intersectionPoint);
console.log(intersectionPoint.x, intersectionPoint.y, intersectionPoint.z); // 输出 (0, 0, 5)

判断射线是否与球体相交：

const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 10), 5);
console.log(ray.intersectsSphere(sphere)); // 输出 true

计算射线与轴对齐包围盒的交点：

const box = new THREE.Box3(new THREE.Vector3(-5, -5, -5), new THREE.Vector3(5, 5, 5));
const intersectionPoint = new THREE.Vector3();
ray.intersectBox(box, intersectionPoint);
console.log(intersectionPoint.x, intersectionPoint.y, intersectionPoint.z); // 输出 (0, 0, -5)

判断射线是否与轴对齐包围盒相交：

const box = new THREE.Box3(new THREE.Vector3(-5, -5, -5), new THREE.Vector3(5, 5, 5));
console.log(ray.intersectsBox(box)); // 输出 true

计算射线与三角形的交点：

const a = new THREE.Vector3(-1, -1, 0);
const b = new THREE.Vector3(1, -1, 0);
const c = new THREE.Vector3(0, 1, 0);
const intersectionPoint = new THREE.Vector3();
ray.intersectTriangle(a, b, c, false, intersectionPoint);
console.log(intersectionPoint.x, intersectionPoint.y, intersectionPoint.z); // 输出 (0, 0, 0)

判断射线是否与三角形相交：

const a = new THREE.Vector3(-1, -1, 0);
const b = new THREE.Vector3(1, -1, 0);
const c = new THREE.Vector3(0, 1, 0);
console.log(ray.intersectsTriangle(a, b, c, false)); // 输出 true

使用 THREE.Ray 在 Three.js 中

THREE.Ray 在 Three.js 中主要用于实现各种几何操作和计算，例如：

• 碰撞检测：可以用来检测射线是否与几何体相交。
• 光线追踪：在光线追踪算法中，可以用来计算光线与几何体的交点。
• 拾取：在用户交互中，可以用来检测用户点击的物体。

示例：碰撞检测

假设你有一条射线和一个球体，你想要检测射线是否与球体相交：

const ray = new THREE.Ray(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 1));
const sphere = new THREE.Sphere(new THREE.Vector3(0, 0, 5), 2);

if (ray.intersectsSphere(sphere)) {
    console.log('Ray intersects the sphere.');
}

这段代码会检测一条射线是否与球体相交。

总结

THREE.Ray 是一个用于表示三维空间中的射线的类，提供了丰富的操作和查询射线的方法。通过这些方法，你可以设置射线的起点和方向，计算射线上的点，计算射线到指定点的最近点和最短距离，计算射线与球体、轴对齐包围盒、三角形的交点等。在 Three.js 的许多功能中，THREE.Ray 对于实现高效的几何计算和碰撞检测非常重要。理解并熟练使用 THREE.Ray 对于开发高质量的 Three.js 应用程序是非常有帮助的。