Question

我使用three.js并动画一些对象。我使用three.js的animate（）函数为对象设置了动画。基本上是这样的：

function animate(){
    object.position.z++;
}

不幸的是，这称为每个渲染帧。因此，在具有不同帧速率的每个设备上，我的对象的速度是不同的。有没有办法根据秒或毫秒来做到这一点？

感谢

Answer 1

requestAnimationFrame传递自页面加载到回调以来的时间。我通常喜欢在几秒钟内完成数学计算，但传入的时间是毫秒，所以

let then = 0;
function animate(now) {
  now *= 0.001;  // make it seconds

  const delta = now - then;
  then = now;

  object.position.z += delta * speedInUnitsPerSecond;

  ...

  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

ps：我很惊讶这还没有在stackoverflow上。它可能在某个地方。当然requestAnimationFrame已被覆盖，可能只是在three.js。

的上下文中

有：Best options for animation in THREE.JS

Answer 2

event.data.Parameters中还有postMessage：

three.js

THREE.Clock()示例r86

Answer 3

在requestAnimationFrame(callback)中，callback(delta)函数只接受一个参数，即帧之间的时间。您可以使用它来考虑不同的帧速率

e.g。

function animate(delta) {
  var i = 1;
  object.position.z += i*delta // do whatever you want with delta
}

Answer 4

您可以使用TWEEN（三个的js库）。这是TWEEN的教程：http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

您可以非常简单地使用它：

  new TWEEN.Tween(object.position).to(targetPos, 200).start().onComplete(()=>{
      //Do something when action complete
  });

Three.js实时动画

4 个答案: