作者：初识Threejs
原文：mp.weixin.qq.com/s/j1R59CRhU...
three-mesh-bvh 是一个由 gkjohnson 开发的开源库，专为 three.js 设计，旨在通过 BVH 结构优化射线投射和空间查询的性能。它的核心目标是提升复杂几何体的处理效率，使前端开发者能够构建更复杂的 3D 场景，同时保持流畅的交互体验。该库的文档展示了一个令人印象深刻的例子：对一个包含 80,000 个多边形的模型进行 500 次射线投射，仍能保持 60fps 的帧率。
在现代 Web 开发中，3D 图形的应用正迅速扩展，从交互式产品展示到沉浸式虚拟现实体验，three.js 作为一款强大的 JavaScript 库，为前端工程师提供了创建浏览器 3D 场景的便捷工具。然而，随着场景复杂度的增加，尤其是高多边形模型的引入，射线投射（raycasting）等核心操作的性能瓶颈日益凸显。射线投射用于物体选择、碰撞检测和光照计算等功能，是 3D 应用的基础。针对这一问题，three-mesh-bvh 库通过引入 Bounding Volume Hierarchy (BVH) 技术，为 three.js 提供了高效的射线投射和空间查询解决方案。
BVH 是一种树状数据结构，通过将 3D 场景中的几何体（如三角形）递归划分为层次化的包围盒（bounding volumes）来加速空间查询。在射线投射中，BVH 的作用是快速排除与射线不相交的几何体部分，从而减少需要进行的详细三角形交互测试。例如，在一个包含数万三角形的模型中，BVH 可以先检查射线是否与较大的包围盒相交，只有在相交的情况下才进一步测试内部的三角形。这种方法显著降低了计算量，尤其在复杂场景中效果显著。对于前端工程师来说，BVH 的概念不仅有助于理解 3D 渲染的优化原理，还能启发在其他性能敏感场景中应用类似的空间划分技术。
案例
