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

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

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

2023-02-09 17:07:42 来源：博客园

(资料图)

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]); // 有可能模型自带多个动画， 这里就需要传入对应动画的索引，})// 然后其他的操作就和上面自己写的一样套用即可！！！

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