为什么立方体不随动画混合器和关键帧跟踪一起移动

Question

我正在尝试学习three.js，并尝试使用animationmixer移动立方体。https://discoverthreejs.com/book/first-steps/animation-system/我正在尝试运行此链接中的代码，但它不起作用。我正在查看控制台以了解原因，但错误没有出现。我不明白为什么它不起作用。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);
camera.position.set( 0, 0, 3 );
camera.lookAt( 0, 0, 0 );
const positionKF = new THREE.VectorKeyframeTrack(
'.position',
[0, 3, 6],
[0, 0, 0, 2, 2, 2, 0, 0, 0]
);
const opacityKF = new THREE.NumberKeyframeTrack(
'.material.opacity',
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 0, 1, 0, 1, 0]
);
const moveBlinkClip = new THREE.AnimationClip('move-n-blink', -1, [
positionKF,
opacityKF
]);
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(moveBlinkClip);
action.play();
var animate = function () {
requestAnimationFrame( animate ); 
renderer.render( scene, camera );
};
animate();

Answer 1

您需要在循环中的每一帧更新混合器。

请参见链接章节中的#更新循环中的动画部分。

如果你这样编辑你的动画功能，它应该可以工作：

const clock = new THREE.Clock();
const animate = function () {
requestAnimationFrame(animate); 
const delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
};