这样的事情怎么样：

function animate() {

    setTimeout( function() {

        requestAnimationFrame( animate );

    }, 1000 / 30 );

    renderer.render();

}

这种方法也可以工作，使用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;
   }
}

CPU和GPU需要完成的工作量取决于工作负载，它们设置了平滑帧速率的上限。

• GPU主要是线性工作的，并且总是可以向屏幕推出相同数量的多边形。
• 然而，如果你把对象的数量增加了一倍，CPU就必须更加努力地工作来使这些对象（矩阵变换等）动画化。这取决于你的世界模型和Javascript所做的其他工作，额外的开销有多大。同样，像 * 可见 * 对象的数量这样的条件也很重要。

对于简单的模型，所有的多边形都在屏幕上，那么它应该几乎遵循“一半的帧率，双倍的对象”的规则。对于3D射击像场景，这绝对不是这样的。

我遇到了这篇文章，它给出了两种解决自定义帧速率问题的方法。
http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
我认为这种方法更健壮，因为它将有一个稳定的动画速度，即使在计算机上渲染画布不一致的60 fps。

var now,delta,then = Date.now();
var interval = 1000/30;

function animate() {
    requestAnimationFrame (animate);
    now = Date.now();
    delta = now - then;
    //update time dependent animations here at 30 fps
    if (delta > interval) {
        sphereMesh.quaternion.multiplyQuaternions(autoRotationQuaternion, sphereMesh.quaternion);
        then = now - (delta % interval);
    }
    render();
}

接受的答案有一个问题，并放弃了高达-10fps在缓慢的计算机相比，不限制fps，所以例如，没有限制36 pfs，与接受的解决方案26 fps（对于60 fps，1000/60 setTimeout）.
您可以执行以下操作：

var dt=1000/60;
var timeTarget=0;
function render(){
  if(Date.now()>=timeTarget){

    gameLogic();
    renderer.render();

    timeTarget+=dt;
    if(Date.now()>=timeTarget){
      timeTarget=Date.now();
    }
  }
  requestAnimationFrame(render);
}

如果已经落后了，那条路是不会等的。

前面的答案似乎忽略了requestAnimationFrame的设计意图，并因此进行了一些无关的调用。requestAnimationFrame接受一个回调，而回调又接受一个高精度的时间戳作为其参数。因此，您知道当前时间，并且不需要调用Date.now（）或任何其他变体，因为您已经知道了时间。所需要的只是基本的算术：

var frameLengthMS = 1000/60;//60 fps
var previousTime = 0;

function render(timestamp){
  if(timestamp - previousTime > frameLengthMS){
   /* your rendering logic goes here */
       drawSomething();
   /* * * * */
    previousTime = timestamp;
  }
  requestAnimationFrame(render);
}