如何手动逐帧控制动画？

Question

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

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属性分配给您需要的任何秒即可。

有关 AnimationMixer 的更多文档，请参阅此处。