求Three.js Frustum使用示例：仅渲染相机视锥内的大量看台

架构老林

2026-7-19

Three.js 视锥体裁剪大量看台模型实现方案

核心逻辑

利用Three.js内置的Frustum类，结合模型的包围盒/包围球做碰撞检测，只渲染相机视锥范围内的看台对象，避免无效渲染提升性能。

具体步骤

预计算包围体：加载完所有看台模型后，对每个看台Mesh执行computeBoundingBox()或computeBoundingSphere()，提前生成包围结构（静态模型只需计算一次）。
实时更新视锥体：每帧从相机的投影矩阵与视图矩阵生成当前视锥体，确保检测范围和相机视角同步。
遍历检测并控制可见性：遍历所有看台，通过视锥体与包围体的相交判断，设置模型的visible属性，仅保留视锥内的模型为可见状态。

性能优化建议

优先使用boundingSphere：球体相交检测的计算量远小于包围盒，精度满足需求的情况下优先选择。
分组检测：将10000+个看台按空间区域分组，先检测组的大包围体，若整个组不在视锥内则直接跳过组内所有对象，大幅减少检测次数。
避免重复计算：静态看台的包围体只需在初始化时计算一次，动态变化的看台才需要在更新后重新计算。

代码示例

// 初始化：存储所有看台并预计算包围球
const stands = []; // 你的所有看台Mesh数组
stands.forEach(stand => {
  stand.computeBoundingSphere();
});

// 渲染循环内处理视锥检测
const frustum = new THREE.Frustum();
const projMatrix = new THREE.Matrix4();

function animate() {
  requestAnimationFrame(animate);

  // 更新视锥体
  projMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
  frustum.setFromProjectionMatrix(projMatrix);

  // 批量设置可见性
  stands.forEach(stand => {
    stand.visible = frustum.intersectsSphere(stand.boundingSphere);
  });

  renderer.render(scene, camera);
}
animate();