[threeJS]--- 外部导入的模型如何编程式实现帧动画以及调用模型自带的动画
- 代码中编写帧动画并且调用
| 12345678910111213141516171819202122232425262728 | 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 编辑器中打开，调整一下几何中心，当模型不位于画布中心时，可能还需要将模型移到画布中心即可。
