Halo
发布于 2024-05-31 / 69 阅读 / 0 评论 / 0 点赞

threejs动画入口

AnimationMixer.update

推进混合器时间并更新动画
通常在渲染循环中完成, 传入按照混合器的时间比例(timeScale)缩放过的clock.getDelta

let mesh;

// 新建一个AnimationMixer, 并取得AnimationClip实例列表
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;

// 在每一帧中更新mixer
function update () {
	mixer.update( deltaSeconds );
}

// 播放一个特定的动画
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );
action.play();

// 播放所有动画
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );

requestAnimationFrame

  • window.requestAnimationFrame(callback)告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
function animation(){
  // do something
  mixer.update( deltaSeconds );
  requestAnimationFrame(animation);
}
animation();

评论