为什么立方体不使用 animationmixer 和 keyframetrack 移动

Question

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

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

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

请参阅您链接的章节中的 #update-the-animation-in-the-loop 部分。

如果您像这样编辑动画函数，它应该可以工作：

const clock = new THREE.Clock();

const animate = function () {
    requestAnimationFrame(animate); 

    const delta = clock.getDelta();
    mixer.update(delta);
    renderer.render(scene, camera);
};

为什么立方体不使用 animationmixer 和 keyframetrack 移动

why doesn't a cube move with animationmixer and keyframetrack

three.js