在使用 Three.js 中创建交互式 3D 场景时，可能需要检测用户与场景中的物体之间的交互。为了实现这一点，Three.js 提供了 Projector 和 Ray 对象。
Projector 对象
Projector 对象是 Three.js 中的一个类，它可以将 3D 空间中的点投影到屏幕上。这个类最常见的用途是将鼠标事件转换为与场景中的对象的交互。
要使用 Projector，需要首先创建一个 Three.js 场景和相机。然后，可以将鼠标事件传递给 Projector，并使用 Projector 的 projectVector 方法将 3D 点转换为屏幕上的二维坐标。以下是示例代码：
----- --------- - --- ------------------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------
-------- ------------------ -
----- ------- - --- --------------
-------------- - ------------------ - - - --
--------------- - ------------------- - - - --
---
--
---------------------------------- --------
-- ------- --- -------- --- -- ----------- -- --- ----- --------
-
------------------------------------ ------------ -------在这个例子中，我们创建了一个 Projector 对象、一个 Three.js 场景和一个透视相机。然后，我们在 onMouseMove 事件处理程序中创建一个 mouse3D 变量，该变量包含鼠标在屏幕上的二维坐标和默认的 Z 坐标（0.5）。接下来，我们使用 Projector 的 unprojectVector 方法将 mouse3D 转换为 3D 空间中的点，并将其存储回 mouse3D 变量中。
Ray 对象
Ray 对象是 Three.js 中的一个类，它可以从一个起点向一个方向发射光线。这个类最常见的用途是检测场景中的物体是否与光线相交。
要使用 Ray，需要首先创建一个 Three.js 场景和相机。然后，可以根据需要创建一个 Ray 对象，并调用其 intersectObjects 方法来查找与光线相交的对象。以下是示例代码：
----- --------- - --- ------------------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------
-------- ------------------ -
----- ------- - --- --------------
-------------- - ------------------ - - - --
--------------- - ------------------- - - - --
---
--
-------------------------------- --------
----- ---------- - -------------------------------------------
-- ------------------ - -- -
-- --- ----- ----------- ------ -- -- --------------------
-
-
------------------------------------ ------------ -------在这个例子中，我们创建了一个 Raycaster 对象、一个 Three.js 场景和一个透视相机。然后，我们在 onMouseMove 事件处理程序中创建一个 mouse3D 变量，该变量包含鼠标在屏幕上的二维坐标和默认的 Z 坐标（0.5）。接下来，我们使用 Raycaster 的 setFromCamera 方法将 mouse3D 转换为起点和方向，并将其存储回 raycaster 对象中。最后，我们调用 Raycaster 的 intersectObjects 方法来查找与光线相交的对象，并将结果存储在 intersects 数组中。
总结
Projector 和 Ray 对象是 Three.js 中用于实现交互式 3D 场景的两个重要类。使用 Projector，可以将 3
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27126