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

## 1. 初始化一些四元数

```let 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. 创建关键帧轨道

```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. 创建动画剪辑

```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_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[9] = mixer[9].clipAction(clip_body);```

0 条评论

• ### three.js 自制骨骼动画（一）

上一篇郭先生解析了一下官方的骨骼动画案例，这篇郭先生就要做一个稍微复杂一点的骨骼动画了，就拿一个小人下手吧。在线案例请点击three.js自制骨骼动画。话不多说...

• ### three.js之初探骨骼动画

今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思，但是对于初学者来说，学起来要稍微困难一些，官方文档比较少，网上除了用圆柱体...

• ### 【带着canvas去流浪（11）】Three.js入门学习笔记

官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述：

• ### 操纵加鲁鲁兽的机会来了，SIGGRAPH论文提出RigNet帮动画师做骨架绑定

什么是动画骨架绑定呢？基于 3D 蒙皮创建骨骼。动画模型中的关节就像现实中人的关节一样，两个关节组成一段骨骼，几段骨骼组成一个骨架。绑定就是把模型绑定到骨骼上边...

• ### Web AR 技术调研笔记

去年年末集中学习了一下已经存在的web ar 相关的项目和技术，并整理和试用了一下各项目的Demo，为了备忘记录了一份笔记。

• ### SceneKit_入门13_骨骼动画

1.创建工程(略) 2.加载场景文件(略) 3.添加框架SceneKit/Scenekit.h 4.创建场景资源对象

• ### 骨骼动画系统Cal3D

在群里看到有人把它用在了商业游戏中, 就很好奇为什么用它. 去网站上看了一下, 觉得许多特性很不错, 像动作融合, LOD之类的 试着用DXUT参考minivi...

• ### Unity动画系统

Animator 1.Animator Controller 2.Avator对角色中骨骼进行分析识别，并与Mecanim中骨骼进行对比。

• ### 3D领域的jpg?模型交换格式glTF概述

在3D开发领域，存储模型是一个基本需求，对于前端也不例外。就像一般网页需要使用jpg、png、webp等格式渲染图片一样，3d页面/软件/游戏的开发者，也需要把...

• ### 实战 Spine 骨骼动画，教你如何换皮游戏动画！

武汉位游出品的《梦幻厨房》目前已经获得了14位伙伴的支持，5折活动今天下午16:30结束，即将恢复原价，需要的朋友请赶快了！

• ### Unity3D--Mecanim动画系统(一)

分为旧版动画系统和新版动画（Mecanim）系统即Animation 与 Animator

• ### 打开摄像头，2D插画实时变动画，中国程序媛出品，Demo在线可玩

这个TensorFlow.js项目名叫Pose Animator，Demo一上线，网友们已经玩嗨了。

• ### 《Honey Select》捏人剖析

关于游戏中的捏人系统, 很少有资料提到怎么做, 印象中只有《天涯明月刀》分享过. 前段时间关注了个VR资源分享的公众号, 经常推送HS的捏人作品, 所以才引发了...

• ### 移动端Mesh限制

Skinned Mesh虽然这里写死了限制最多75个骨骼，实际上可以通过修改引擎源代码来放宽限制：

• ### 一篇读懂HTML5引擎性能之王LayaAir

性能是HTML5引擎最核心的指标，性能一旦出现瓶颈，就会限制策划的系统设计，限制美术的画面表现。譬如，近期有CP吐槽“本欲使用某引擎设计5 V 5的战斗，同屏...

• ### SceneKit绘制模型与骨骼动画的实现

#####研究目的 sceneKit里可以绘制几种几何模型，但那些不规律的形状如果不想使用模型，那么就要自己绘制了 #####demo效果 [1.gif] [U...

• ### 你知道几种前端动画的实现方式？

随着互联网的持续发展，H5 页面作为与用户直接交互的表现层越来越复杂，呈现的形式也越来越丰富，从而也要求 H5 页面具有更多的花样性及动画效果。那前端实现动画效...