javascript - 如何解决不同浏览器上requestAnimationFrame中FPS不同的问题？

Question

如何解决requestAnimationFrame在不同浏览器下FPS不同的问题？
我正在使用使用 requestAnimationFrame 的 THREE.js 制作 3D 游戏，它在 Google Chrome 15 上速度很快。
但是，它在 Firefox 6 上真的很慢，在 IE9 上真的很慢(比 Firefox 慢)。
这确实是一个大问题，我想知道是否有解决方案。

谢谢。

Answer 1

通常要做的是创建一个 deltaTime (dt) 变量，然后将其用作每个动画/更新周期的参数。

代码仅用于可视化问题/解决方案。

// ...
timer: function(){
    var now = new Date().getTime(); // get current time
    this.controls.dt = now - this.controls.time; // calculate time since last call
    this.controls.time = now; // update the current application time
    this.controls.frame++; // also we have a new frame
    return this.controls.dt ;
}

对于任何对渲染函数的调用，你都会传递 dt

// we call the update function with every request frame
update: function(){
    var dt = this.timer();
    _.each(this.activeViews, function(item){ item.update(dt); });  // this is underscore.js syntax
}

item.update(dt) 看起来像那样

//...
var x = this.position.get(x);
x = x + (10*dt); // meaning: x increases 10 units every ms.
this.position.x = x;