Three.js 实时动画

Question

我正在使用 three.js 并对一些对象进行动画处理。我使用 three.js 的 animate() 函数为对象设置了动画。基本上是这样的：

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

不幸的是，这被称为每个渲染帧。所以在每个具有不同帧率的设备上，我的对象的速度是不同的。有没有办法让这取决于秒或毫秒？

谢谢

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

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 的上下文中。

有这个： THREE.JS 中动画的最佳选择

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

Answer 2

还有 THREE.Clock() 在 three.js 中：

 var clock = new THREE.Clock();
var speed = 2; //units a second
var delta = 0;

render();
function render(){
  requestAnimationFrame(render);

  delta = clock.getDelta();
  object.position.z += speed * delta;

  renderer.render(scene, camera);
}

jsfiddle 示例 r86

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