three.js 自制骨骼动画（二）

本文主要是介绍three.js 自制骨骼动画（二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

初始化一些四元数
首先我们需要一些四元数，因为我们的动画里有很多旋转并且帧动画的旋转要求是四元数。

复制代码
et q1 = this.getQuater(0,0,-Math.PI/4)
let q2 = this.getQuater(0,0,Math.PI/3)
let q3 = this.getQuater(0,0,-Math.PI/2)
let q4 = this.getQuater(0,0,0)
let q5 = this.getQuater(0,0,Math.PI/4)
let q6 = this.getQuater(0,0,Math.PI/3)
let q7 = this.getQuater(0,Math.PI/4,Math.PI/12)
let q8 = this.getQuater(0,0,-Math.PI/6)
let q9 = this.getQuater(0,-Math.PI/4,Math.PI/12)
let q10 = this.getQuater(0,Math.PI/12,0)
let q11 = this.getQuater(0,-Math.PI/12,0)

getQuater(x,y,z) {
return new THREE.Quaternion().setFromEuler(new THREE.Euler(x,y,z));
},
复制代码
2. 创建关键帧轨道
关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。这里预设好一些轨道，以便于我们是使用

复制代码
let temp = new THREE.Mesh(new THREE.BoxGeometry(1), new THREE.MeshBasicMaterial());
let leg_l_t = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q2.x,q2.y,q2.z,q2.w,q1.x,q1.y,q1.z,q1.w,q2.x,q2.y,q2.z,q2.w]);
let leg_r_t = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q1.x,q1.y,q1.z,q1.w,q2.x,q2.y,q2.z,q2.w,q1.x,q1.y,q1.z,q1.w]);
let leg_l_b = new THREE.KeyframeTrack(‘temp.quaternion’, [0,1.2,2,3.2,4], [q4.x,q4.y,q4.z,q4.w,q3.x,q3.y,q3.z,q3.w,q4.x,q4.y,q4.z,q4.w,q3.x,q3.y,q3.z,q3.w,q4.x,q4.y,q4.z,q4.w]);
let leg_r_b = new THREE.KeyframeTrack(‘temp.quaternion’, [0,1.2,2,3.2,4], [q4.x,q4.y,q4.z,q4.w,q3.x,q3.y,q3.z,q3.w,q4.x,q4.y,q4.z,q4.w,q3.x,q3.y,q3.z,q3.w,q4.x,q4.y,q4.z,q4.w]);
let arm_l_t = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q1.x,q1.y,q1.z,q1.w,q5.x,q5.y,q5.z,q5.w,q1.x,q1.y,q1.z,q1.w]);
let arm_r_t = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q5.x,q5.y,q5.z,q5.w,q1.x,q1.y,q1.z,q1.w,q5.x,q5.y,q5.z,q5.w]);
let arm_l_b = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q4.x,q4.y,q4.z,q4.w,q6.x,q6.y,q6.z,q6.w,q4.x,q4.y,q4.z,q4.w]);
let arm_r_b = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q6.x,q6.y,q6.z,q6.w,q4.x,q4.y,q4.z,q4.w,q6.x,q6.y,q6.z,q6.w]);
let head = new THREE.KeyframeTrack(‘temp.quaternion’, [0,1,2,3,4], [q7.x,q7.y,q7.z,q7.w,q8.x,q8.y,q8.z,q8.w,q9.x,q9.y,q9.z,q9.w,q8.x,q8.y,q8.z,q8.w,q7.x,q7.y,q7.z,q7.w]);
let body = new THREE.KeyframeTrack(‘temp.quaternion’, [0,2,4], [q10.x,q10.y,q10.z,q10.w,q11.x,q11.y,q11.z,q11.w,q10.x,q10.y,q10.z,q10.w]);
复制代码
3. 创建动画剪辑
动画剪辑（AnimationClip）是一个可重用的关键帧轨道集。这里为上面的关键帧轨道创建动画剪辑，并且剪辑的持续时间都是4秒

复制代码
let duration = 4;
let clip_leg_l_t = new THREE.AnimationClip(“default”, duration, [leg_l_t]);
let clip_leg_r_t = new THREE.AnimationClip(“default”, duration, [leg_r_t]);
let clip_leg_l_b = new THREE.AnimationClip(“default”, duration, [leg_l_b]);
let clip_leg_r_b = new THREE.AnimationClip(“default”, duration, [leg_r_b]);
let clip_arm_l_t = new THREE.AnimationClip(“default”, duration, [arm_l_t]);
let clip_arm_r_t = new THREE.AnimationClip(“default”, duration, [arm_r_t]);
let clip_arm_l_b = new THREE.AnimationClip(“default”, duration, [arm_l_b]);
let clip_arm_r_b = new THREE.AnimationClip(“default”, duration, [arm_r_b]);
let clip_head = new THREE.AnimationClip(“default”, duration, [head]);
let clip_body = new THREE.AnimationClip(“default”, duration, [body]);
复制代码
4. 创建动画混合器
动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。

复制代码
mixer[0] = new THREE.AnimationMixer(bone4);
mixer[1] = new THREE.AnimationMixer(bone5);
mixer[2] = new THREE.AnimationMixer(bone6);
mixer[3] = new THREE.AnimationMixer(bone7);
mixer[4] = new THREE.AnimationMixer(bone10);
mixer[5] = new THREE.AnimationMixer(bone11);
mixer[6] = new THREE.AnimationMixer(bone12);
mixer[7] = new THREE.AnimationMixer(bone13);
mixer[8] = new THREE.AnimationMixer(bone2);
mixer[9] = new THREE.AnimationMixer(bone3);
复制代码
5. 创建动画控制器
它可以控制动画的播放、停止等功能

复制代码
action[0] = mixer[0].clipAction(clip_leg_l_t);
action[1] = mixer[1].clipAction(clip_leg_r_t);
action[2] = mixer[2].clipAction(clip_leg_l_b);
action[3] = mixer[3].clipAction(clip_leg_r_b);
action[4] = mixer[4].clipAction(clip_arm_l_t);
action[5] = mixer[5].clipAction(clip_arm_r_t);
action[6] = mixer[6].clipAction(clip_arm_l_b);
action[7] = mixer[7].clipAction(clip_arm_r_b);
action[8] = mixer[8].clipAction(clip_head);
action[9] = mixer[9].clipAction(clip_body);
深圳网站建设www.sz886.com

这篇关于three.js 自制骨骼动画（二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---