three.js 操作包围盒 刨切

Three.js 是一个基于 JavaScript 的 3D 渲染库，用于在 Web 浏览器中创建和交互逼真的 3D 图形。操作包围盒（Bounding Box）在 Three.js 中主要用于优化性能，特别是在处理大量物体或复杂的场景时，包围盒可以帮助我们快速确定哪些物体与相机互动，从而提高渲染效率。

"刨切"（Culling）是图形学中的一个术语，它指的是根据视口（camera frustum）只渲染那些位于可见区域内的几何体，减少不必要的绘制操作。Three.js 提供了 `THREE.CullFaceNone`、`THREE.CullFaceFront` 和 `THREE.CullFaceBack` 来控制背面（backface culling）的剔除，而包围盒的计算正是背面剔除算法的基础。

在 Three.js 中操作包围盒和刨切的基本步骤如下：

1. 创建包围盒（Bounding Box）：
对于每个加载的几何体（如 Mesh），你可以使用 `geometry.computeBoundingBox()` 来计算它的包围盒。

const geometry = new THREE.BoxGeometry();
geometry.computeBoundingBox();
const bbox = geometry.boundingBox;

2. 确定哪些物体在视锥体内：
在渲染之前，检查每个物体的包围盒是否完全在视锥体内，不在的物体可以剔除不渲染。

3. 应用刨切（Culling）：
在渲染器的设置中，启用背面剔除，然后根据包围盒判断：

   renderer.setCullFace(THREE.CullFaceBack);
   scene.cull = THREE.CullFaceBack; // 对整个场景应用culling