Three.js 控制渲染帧率 FPS

Question

首先你应该知道 Three.js 渲染器的渲染方法 .render() 每执行一次，WebGL帧缓冲区就得到一帧像素数据，canvas画布就会显示当前渲染的一帧像素数据。通过 requestAnimationFrame() 可以周期性调用执行渲染方法.render()，帧率就是指渲染方法.render()每秒钟执行次数，比如帧率是 60，可以表示为 60FBS，FBS 对应的英文是 Frame per Second 每秒帧数，如果帧率是50，那么2秒对应帧数就是100.

在一些特定的应用中没有必要保持Threejs渲染频率为60FPS，那么可以通过Threejs渲染时间判断来控制Threejs渲染频率，比如设置为30FPS。

下面代码通过时钟对象.Clock的.getDelta()方法获得threejs两帧渲染时间间隔，然后通过时间判断来控制渲染器渲染方法.render()每秒执行次数。

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次
var FPS = 30;
var renderT = 1 / FPS; //单位秒  间隔多长时间渲染渲染一次
// 声明一个变量表示render()函数被多次调用累积时间
// 如果执行一次renderer.render，timeS重新置0
var timeS = 0;
function render() {
  requestAnimationFrame(render);
  //.getDelta()方法获得两帧的时间间隔
  var T = clock.getDelta();
  timeS = timeS + T;
  // requestAnimationFrame默认调用render函数60次，通过时间判断，降低renderer.render执行频率
  if (timeS > renderT) {
    // 控制台查看渲染器渲染方法的调用周期，也就是间隔时间是多少
    console.log(`调用.render时间间隔`,timeS*1000+'毫秒');
    renderer.render(scene, camera); //执行渲染操作
    ...
    //renderer.render每执行一次，timeS置0
    timeS = 0;
  }
}
render();