介绍
three-mesh-bvh 是一个基于三维图形库 three.js 的 npm 包。它使用 BVH（Bouding Volume Hierarchy）空间分割算法来加速三维网格（Mesh）对象的查找，并提供了一系列 API 来管理和操作这些对象。该包可以用于构建各种三维图形应用程序，如游戏、虚拟现实、建筑、工业设计等。
安装
使用 npm 安装 three-mesh-bvh：
--- ------- --------------
或者通过 CDN 引入：
------- -----------------------------------------------------------
用法
首先，需要使用 three.js 构建一个场景，并将场景渲染到浏览器中。然后，导入 three-mesh-bvh 包并添加 MeshBVH 节点，该节点将负责管理三维网格对象：
------ - ------- - ---- ----------------- ----- -------- - --- --------------------- --- ---- ----- -------- - --- ------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- ----- ------- - --- --------------
以上代码中，我们创建了一个红色的立方体，并将其添加到场景中。然后，我们创建了一个 MeshBVH 实例，并将红色立方体作为参数传递给该实例。这会自动计算出网格对象的 AABB（Axis-Aligned Bounding Box，轴对齐包围盒）信息，并使用 BVH 空间分割算法将其分割成一系列 Bounding Volume 对象。
现在，我们可以使用 MeshBVH 实例来查找与其他物体的碰撞信息、计算与光线的交点、寻找最近邻对象等。例如，我们可以使用 MeshBVH 的 raycast 方法来查询与光线相交的网格对象：
----- --------- - --- ------------------ ----- ------ - --- ---------------- -- ----- ----- --------- - --- ---------------- -- --- --------------------- ----------------------- ----- ---- - --------------------------- ------------------
以上代码中，我们创建了一个 Raycaster 对象，并设置其起点和方向。然后，我们调用 MeshBVH 实例的 raycast 方法，并将 Raycaster 对象作为参数传递给该方法。该方法会返回与光线相交的所有 Bounding Volume 对象并输出到控制台。注意，如果 Bounding Volume 对象与光线相交，但实际网格对象与光线不相交，则不会返回这些 Bounding Volume 对象。
示例
下面是一个简单的示例，演示如何使用 three-mesh-bvh 包来查询与光线相交的立方体。该示例将在屏幕上绘制一个红色的立方体，并在游戏循环中查询与鼠标指针相交的立方体。
------ - -- ----- ---- --------
------ - ------------- - ---- -----------------------------------------------
------ - ------- - ---- -----------------
-- -----------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------
----------------- - --
----- -------- - --- --------------------- ---------- ---- ---
----------------------------------- --------------------
-----------------------------------------------
-- ------ ------- --
----- -------- - --- -------------------- -- ---
----- -------- - --- ------------------------- ------ -------- ---
----- ---- - --- -------------------- ----------
----------------
----- ------- - --- --------------
-- -----
----- -------- - --- --------------------- ---------------------
-- ------
----- --------- - --- ------------------
----- ------- - --- ----------------
-- ------------------
-------------------------------------- ------- -- -
--------- - -------------- - ------------------ - - - --
--------- - - -------------- - ------------------- - - - --
-------------------------------- --------
----- ---- - ---------------------------
------------------
---
-- ----
-------- --------- -
-------------------------------
---------------------- --------
-
----------结论
three-mesh-bvh 是一个高效且易于使用的 npm 包，可以大大加速三维网格对象的查找。该包提供了一些 API，可以用于与其他物体的碰撞检测、与光线的交点计算、寻找最近邻对象等操作。它可以被广泛应用于各种三维图形应用程序开发中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedba50b5cbfe1ea06118e2