[threeJS]--- 外部导入的模型如何编程式实现帧动画以及调用模型自带的动画

1. 代码中编写帧动画并且调用

 

async function keyframeAni(object) {
  const times = [0, 2]; //关键帧时间数组，单位'秒'
  const rorateValues = [0, -Math.PI * 2]; //需要转动的角度
  const duration = 2 // 动画持续时间

  // 关键帧轨道！！！
  const rotateTrack = new THREE.KeyframeTrack(
    'AnimationRef.rotation[y]', // animationRef-作用于模型的name.roration[y]-动画方式-绕y轴旋转
    times, // 
    rorateValues
  );

  //动画剪辑
  const clip = new THREE.AnimationClip('modelRotation', duration, [rotateTrack]);

  //播放编辑好的关键帧动画
  // console.log(object);

  // const gp = new THREE.Object3D(); // 用一个3d物体包裹模型，旋转3d物体已达到绕自身旋转的效果。failed
  // gp.position.set(0, 0, 0);
  // gp.add(object);

  mixer = new THREE.AnimationMixer(object);
  const animation = mixer.clipAction(clip);
  animation.setLoop(THREE.LoopOnce, 1) // 设置帧动画只播放一次！！！ //默认是无线循环，infinity！！！
  animation.timeScale = 1 //调节播放速度，默认1，0动画暂停，负数动画反方向执行。
  animation.play() //开始播放。
}

　以上准备工作做好，还需要　【引用自简书】

 

 

 这样子就可以实现自己写的帧动画了。

2.调用模型中自带的动画

这个更简单了：

//模型加载 

  loader.load(path, (object) => {
　　　mixer = new THREE.AnimationMixer(object);
  　 const animation = mixer.clipAction(object.animations[0]); // 有可能模型自带多个动画， 这里就需要传入对应动画的索引，
})
// 然后其他的操作就和上面自己写的一样套用即可！！！
 　

 

遗留问题点：模型旋转不是绕自身中心来旋转的。待解决。知道的也可以告诉我，一起交流学习。

 【已解决】：上面旋转中心的问题是，建模时没有将模型的中心定位到模型的几何中心。 将模型在3d 编辑器中打开，调整一下几何中心，当模型不位于画布中心时，可能还需要将模型移到画布中心即可。