Question

关于Three.js示例https://threejs.org/examples/#webgl_animation_keyframes，我能够加载自己的模型并循环播放动画。但是，我想制作一个“滑块”，使用户可以逐帧控制动画。如何使用AnimationMixer实现此目的？假设动画剪辑的持续时间为4s。我想实时控制当前动画时间从0s到4s。

Answer 1

答案就在您链接的示例代码中

mixer = new THREE.AnimationMixer( model );
mixer.clipAction( gltf.animations[ 0 ] ).play();

// ...

function animate() {
    var delta = clock.getDelta();
    mixer.update( delta );

    renderer.render( scene, camera );

    requestAnimationFrame( animate );
}

mixer.update( delta );是每帧（60FPS）以0.0166秒更新动画的功能。如果您想跳到特定时刻，只需将.time属性分配给所需的任何时间。

See here，以获得有关AnimationMixer的更多文档。

Answer 2

另一个答案不完整。如原始文章中所述，它将永远无法使用滑块输入。问题在于动画混合器更新功能会相对于当前时间更改时间，并且随后不适用于如上所述的滑块输入。

相反，您想创建一个这样的函数：

  function seekAnimationTime(animMixer, timeInSeconds){
    animMixer.time=0;
    for(var i=0;i<animMixer._actions.length;i++){
      animMixer._actions[i].time=0;
    }
    animMixer.update(timeInSeconds)
  }

有了这个，您就可以在滑块的OnChange事件侦听器中运行它：

seekAnimationTime(yourAnimationMixer, event.value);

或将动画时间设置为2s：

seekAnimationTime(yourAnimationMixer,2);

无论以前的animationMixer时间是什么，此解决方案都将起作用。

Answer 3

Alexander's answer 是正确的；要实现滑块输入控件所描述的内容（例如擦洗视频），则 AnimationMixer.update method 不合适。

幸运的是，现在有一个 AnimationMixer.setTime method 来实现这一点。它基本上实现为 Alexander described，您可以在此处看到：https://github.com/mrdoob/three.js/blob/r130/src/animation/AnimationMixer.js#L649-L661

滑动/滑动到以秒为单位的确切时间：

mixer.setTime( exactTimeInSeconds )

将时间向前移动 delta 秒：

使用 Clock.getDelta method 获取自上次调用以来经过的秒数：

const delta = clock.getDelta(); // Optional: In this case we get delta from Three.js' own clock instead of a slider
mixer.update( delta );

一起

为了将所有这些联系在一起，考虑一个我们想要达到 3 秒标记的示例场景：

mixer.setTime(2); // time = 2 second mark
mixer.update(1); // time = 2 + 1 = 3 second mark

如何手动逐帧控制动画？

3 个答案: