关键帧动画

创建帧动画

const geometry = new THREE.BoxGeometry(10, 10, 10)
const material = new THREE.MeshLambertMaterial({
  color: 0xff0000
})

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

//时间轴上，设置三个时刻0、3、6秒
// times中三个不同时间点，物体分别对应values中的三个xyz坐标
// 0~3秒，物体从(0,0,0)逐渐移动到(100,0,0),3~6秒逐渐从(100,0,0)移动到(0,0,100)
const posKF = new THREE.KeyframeTrack('.position', [0, 3, 6], [0, 0, 0, 10, 0, 0, 0, 0, 10]);
// 从2秒到5秒，物体从红色逐渐变化为蓝色
const colorKF = new THREE.KeyframeTrack('.material.color', [2, 5], [1, 0, 0, 0, 0, 1]);
// 基于关键帧数据，创建一个clip关键帧动画对象，命名"Action"，持续时间6秒。
const clip = new THREE.AnimationClip("Action", 6, [posKF, colorKF]);
// 包含关键帧动画的模型对象作为AnimationMixer的参数创建一个播放器mixer
const mixer = new THREE.AnimationMixer(mesh);
const clipAction = mixer.clipAction(clip); 
//.play()控制动画播放，默认循环播放
clipAction.play();

const clock = new THREE.Clock();
function render(time) {
  const delta = clock.getDelta();
  // mixer.update()更新播放器AnimationMixer时间
  if ( mixer ) {
    mixer.update( delta );
  }

  renderer.render( scene, camera );
  requestAnimationFrame(render)
}
render()

执行播放器AnimationMixer的.clipAction()方法返回一个AnimationAction对象,AnimationAction对象用来控制如何播放，比如.play()方法。

如果想播放动画开始变化,需要周期性执行mixer.update()更新播放器AnimationMixer时间数据，比如你可以在requestAnimationFrame创建的可以周期性执行的函数中，更新播放器时间数据。