Three.js低FPS问题排查：缩放场景时帧率反常原因分析

这种反直觉的帧率表现确实挺让人困惑的，我结合实际开发中踩过的坑，给你梳理几个最可能的原因和排查步骤：

• 视锥体剔除没正常工作
  按逻辑放大时相机视锥体缩小，本该自动剔除大量不在视野内的几何体，但如果你的几何体没正确计算边界盒/边界球，Three.js的视锥体剔除就无法生效。你可以手动给几何体补全边界计算：

  geometry.computeBoundingBox();
  geometry.computeBoundingSphere();
  

  另外别忘了检查相机的frustumCulled属性，要是被误设为false，不管视图怎么变都会强制渲染所有20000个三角形，那放大自然不会有性能提升。

• 像素填充率成了瓶颈
  放大时可见三角形数量减少，但每个三角形在屏幕上的像素占比会暴增。如果你的材质用了复杂的片元着色器（比如多纹理叠加、PBR光照计算），GPU需要处理的像素运算量会直线上升，反而比渲染大量小三角形更耗资源。你可以临时换成最简单的MeshBasicMaterial测试，要是帧率立马回升，那就是片元着色器的锅。

• 过度绘制问题严重
  放大后如果视野内有大量重叠的几何体（比如透明物体、多层结构），GPU会重复绘制同一区域的像素，导致性能浪费。你可以开启Three.js的过度绘制调试模式直观查看：

  renderer.debug.checkOverdraw = true;
  

  屏幕上红色越深的区域过度绘制越严重，这时候就需要调整透明物体的渲染顺序，或者精简重叠区域的几何体。

• LOD细节层次设置搞反了
  如果你给场景加了LOD组件，会不会不小心把高面数的模型绑定到了近距离（放大）的层级？比如本来应该近距离用低面数简化模型，结果搞反成了近距离加载高细节模型，那放大时反而会渲染更多三角形。检查下LOD的addLevel参数，确保距离阈值和模型面数的对应关系是正确的。

• 渲染器或GPU驱动的小问题
  有时候渲染器的精度设置过高（比如默认的highp），在放大后高分辨率的像素运算会加重GPU负担。可以尝试把材质的精度调低试试：

  material.precision = 'mediump';
  

  另外也可以更新下显卡驱动，或者临时关闭MSAA抗锯齿，看看帧率有没有变化。

内容的提问来源于stack exchange，提问作者duhaime