介绍
three-mesh-bvh 是一个基于三维图形库 three.js 的 npm 包。它使用 BVH（Bouding Volume Hierarchy）空间分割算法来加速三维网格（Mesh）对象的查找，并提供了一系列 API 来管理和操作这些对象。该包可以用于构建各种三维图形应用程序，如游戏、虚拟现实、建筑、工业设计等。
安装
使用 npm 安装 three-mesh-bvh：
npm install three-mesh-bvh
或者通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/three-mesh-bvh"></script>
用法
首先，需要使用 three.js 构建一个场景，并将场景渲染到浏览器中。然后，导入 three-mesh-bvh 包并添加 MeshBVH 节点，该节点将负责管理三维网格对象：
import { MeshBVH } from 'three-mesh-bvh';
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const meshBVH = new MeshBVH(mesh);以上代码中，我们创建了一个红色的立方体，并将其添加到场景中。然后，我们创建了一个 MeshBVH 实例，并将红色立方体作为参数传递给该实例。这会自动计算出网格对象的 AABB（Axis-Aligned Bounding Box，轴对齐包围盒）信息，并使用 BVH 空间分割算法将其分割成一系列 Bounding Volume 对象。
现在，我们可以使用 MeshBVH 实例来查找与其他物体的碰撞信息、计算与光线的交点、寻找最近邻对象等。例如，我们可以使用 MeshBVH 的 raycast 方法来查询与光线相交的网格对象：
const raycaster = new THREE.Raycaster(); const origin = new THREE.Vector3(0, 0, -10); const direction = new THREE.Vector3(0, 0, 1); raycaster.set(origin, direction.normalize()); const hits = meshBVH.raycast(raycaster); console.log(hits);
以上代码中，我们创建了一个 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