上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击博客原文。话不多说先上图。

1. 初始化一些四元数

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

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);

在需要播放动画的时候调用action[n].play()即可播放动画了,你看他跑的多high啊,是不是很简单。
最近文章有点难写,欢迎three.js的萌新提问,我会在下一期试着给出答案哦,如果没有,我就会在接下来的一段时间说一说three.js着色器材质,我相信这是一个十分有意思和具有挑战性的知识。

转载请注明地址:郭先生的博客

three.js 自制骨骼动画(二)的更多相关文章

  1. three.js 自制骨骼动画(一)

    上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧.在线案例请点击博客原文.话不多说先上大图 骨骼动画在GUI上面都有体现.制作骨骼动画的步骤在 ...

  2. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  3. three.js之初探骨骼动画

    今后的几篇郭先生主要说说three.js骨骼动画.three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨 ...

  4. cocos2dx骨骼动画Armature源码分析(二)

    flash中数据与xml中数据关系 上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义). sk ...

  5. cocos2d-x开发记录:二,基本概念(骨骼动画)

    九,骨骼动画 1.骨骼动画vs Sprite sheets 你能使用sprite sheets 创建动画,它很快又容易.直到你意识到你的游戏需要大量的动画并且内存消耗越来越高,并且需要时间载入全部数据 ...

  6. 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

    步骤: 1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/a ...

  7. 集成骨骼动画Spine的几点经验

    最近开始用cantk做些复杂的游戏,其中一个游戏的DragonBones骨骼动画的JSON文件就达600K,导出之后显示各种不正常,可能是太复杂了,有些方面达到了DragonBones的极限.拿到官方 ...

  8. 基于babylon3D模型研究3D骨骼动画(1)

    3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...

  9. cocos creator 动画编辑器以及骨骼动画的使用

    一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与 ...

随机推荐

  1. [NOI Online #2 提高组]涂色游戏 题解

    题目描述 你有 1020 个格子,它们从 0 开始编号,初始时所有格子都还未染色,现在你按如下规则对它们染色: 编号是 p1 倍数的格子(包括 0号格子,下同)染成红色. 编号是 p2 倍数的格子染成 ...

  2. 一文了解HAProxy主要特性

    本文转自Rancher Labs 在Kubernetes中,Ingress对象定义了一些路由规则,这些规则规定如何将一个客户端请求路由到指定服务,该服务运行在你的集群中.这些规则可以考虑到输入的HTT ...

  3. 最近用unity写三消游戏,mark一个准备用的unity插件,用来控制运动。

    http://www.pixelplacement.com/itween/index.php itween 听说还不错!

  4. 使用命名管道承载gRPC

    最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了. gRPC设计 刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解决所有问题吗?不见得,先看看他的优点: gRPC是一种与 ...

  5. scrapy (三) : 请求传参

    scrapy 请求传参 1.定义数据结构item.py文件 ''' field: item.py ''' # -*- coding: utf-8 -*- # Define here the model ...

  6. python 面试题一:Python语言特性

    1 Python的函数参数传递 两个例子 a = 1 def fun(a): a = 2 fun(a) print a # a = [] def fun(a): a.append(1) fun(a) ...

  7. Mariadb之主从复制的读写分离

    首先我们来回顾下代理的概念,所谓代理就是指的是一端面向客户端,另外一端面向服务端,代理客户端访问服务端,我们把这种代理叫正向代理:代理服务端响应客户端我们叫做反向代理,这个我们在之前nginx系列博客 ...

  8. POJ 1057 File Mapping 最详细的解题报告

    题目来源:POJ 1057 File Mapping 题目大意:像我的电脑那样显示文件夹和文件信息,其中在同一级目录内,文件夹排在文件的前面并且文件夹的顺序不变,同一级目录中文件按字母序排列.文件以‘ ...

  9. JavaScript 对象的创建和操作

    <script>         // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串.         // 对象种类         // 内置对象(nativ ...

  10. LeetCode第4题:寻找两个有序数组的中位数

    double Solution::findMedianSortedArrays(vector<int>& nums1, vector<int>& nums2) ...