如何使用 Three.js 动画系统为相机设置动画？答案

【问题标题】：How do I animate a camera with the Three.js animation system?如何使用 Three.js 动画系统为相机设置动画？
【发布时间】：2019-12-06 16:10:54
【问题描述】：

我正在尝试使用 AnimationAction 为透视相机设置动画，但是当我调用 myAction.play() 时没有任何反应。

const positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 50, 0, 0, 0, 0, 0 ] );
const clip = new THREE.AnimationClip( 'Action', 5, [ positionKF ] );

// create new AnimationMixer
const myMixer = new THREE.AnimationMixer( camera2 );
// create new ClipAction and make it play
const clipAction = myMixer.clipAction( clip );
clipAction.play();

然后什么也没有发生。我在这里做错了吗？或者相机不可能以这种方式制作动画？

【问题讨论】：

您是否在动画循环中更新myMixer？
@Mugen87 否。AnimationMixer 是否需要在调用 play() 后更新？
我已通过解决方案添加了对您问题的答案。

标签： animation three.js camera

【解决方案1】：

您必须每帧更新AnimationMixer 的实例。典型的动画循环如下所示：

function animate() {

    requestAnimationFrame( animate );

    const delta = clock.getDelta(); // clock is an instance of THREE.Clock

    if ( mixer ) mixer.update( delta );

    renderer.render( scene, camera );

}

three.js R106

【讨论】：