限制 Three.js 中的帧速率以提高性能，requestAnimationFrame？

Question

我在想，对于我做的一些项目，60fps 并不是完全需要的。我想我可以拥有更多以 30fps 运行的对象和东西，如果我能让它以该帧速率平稳运行的话。我想如果我在 three.js 中编辑 requestAnimationFrame shim，我可以那样将它限制为 30。但我想知道是否有更好的方法使用提供的 three.js 本身来做到这一点。另外，这会给我带来我所想的那种性能提升吗？我能否以 30fps 渲染两倍于 60fps 的物体？我知道以 30 帧和 60 帧运行时的区别，但我能否让它以 30fps 的稳定恒定帧率运行？

我通常使用 WebGLRenderer，并在需要时回退到 Canvas，除非是专门针对某个项目的项目，通常是 webgl 着色器项目。

原文由 Cory Gross 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像这样的事情怎么样：

 function animate() {

    setTimeout( function() {

        requestAnimationFrame( animate );

    }, 1000 / 30 );

    renderer.render();

}

原文由 mrdoob 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这种方法也可以工作，使用 THREE.Clock 来测量增量。

 let clock = new THREE.Clock();
let delta = 0;
// 30 fps
let interval = 1 / 30;

function update() {
  requestAnimationFrame(update);
  delta += clock.getDelta();

   if (delta  > interval) {
       // The draw or time dependent code are here
       render();

       delta = delta % interval;
   }
}

原文由 karlos 发布，翻译遵循 CC BY-SA 4.0 许可协议