Three.js实时动画

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

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

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