Three.js 如何逐帧手动控制动画？

关于这个Three.js示例，我能够加载自己的模型并在循环中播放动画。不过，我想制作一个“滑块”，允许用户逐帧控制动画。如何使用AnimationMixer实现这一点？假设动画剪辑的持续时间为4s。我想实时控制当前动画时间从0秒到4秒。

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

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（增量）

是在每帧（每秒60帧）上更新动画0.0166秒的内容。如果您想跳到某个特定时刻，只需将该属性指定给所需的任何秒

---

有关AnimationMixer的更多文档。

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

相反，您希望生成如下函数：

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

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

seekAnimationTime(yourAnimationMixer,2);

---

无论上一次的animationMixer时间是多少，此解决方案都将起作用。

以下示例可能是一个很好的起点。它允许您使用时间轴界面录制和控制动画：

seekAnimationTime(yourAnimationMixer,2);