three.js 自制骨骼动画(二)
上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的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 自制骨骼动画(二)的更多相关文章
- three.js 自制骨骼动画(一)
上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧.在线案例请点击博客原文.话不多说先上大图 骨骼动画在GUI上面都有体现.制作骨骼动画的步骤在 ...
- 基于Babylon.js编写简单的骨骼动画生成器
使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...
- three.js之初探骨骼动画
今后的几篇郭先生主要说说three.js骨骼动画.three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨 ...
- cocos2dx骨骼动画Armature源码分析(二)
flash中数据与xml中数据关系 上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义). sk ...
- cocos2d-x开发记录:二,基本概念(骨骼动画)
九,骨骼动画 1.骨骼动画vs Sprite sheets 你能使用sprite sheets 创建动画,它很快又容易.直到你意识到你的游戏需要大量的动画并且内存消耗越来越高,并且需要时间载入全部数据 ...
- 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项
步骤: 1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/a ...
- 集成骨骼动画Spine的几点经验
最近开始用cantk做些复杂的游戏,其中一个游戏的DragonBones骨骼动画的JSON文件就达600K,导出之后显示各种不正常,可能是太复杂了,有些方面达到了DragonBones的极限.拿到官方 ...
- 基于babylon3D模型研究3D骨骼动画(1)
3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...
- cocos creator 动画编辑器以及骨骼动画的使用
一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与 ...
随机推荐
- [NOI Online #2 提高组]涂色游戏 题解
题目描述 你有 1020 个格子,它们从 0 开始编号,初始时所有格子都还未染色,现在你按如下规则对它们染色: 编号是 p1 倍数的格子(包括 0号格子,下同)染成红色. 编号是 p2 倍数的格子染成 ...
- 一文了解HAProxy主要特性
本文转自Rancher Labs 在Kubernetes中,Ingress对象定义了一些路由规则,这些规则规定如何将一个客户端请求路由到指定服务,该服务运行在你的集群中.这些规则可以考虑到输入的HTT ...
- 最近用unity写三消游戏,mark一个准备用的unity插件,用来控制运动。
http://www.pixelplacement.com/itween/index.php itween 听说还不错!
- 使用命名管道承载gRPC
最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了. gRPC设计 刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解决所有问题吗?不见得,先看看他的优点: gRPC是一种与 ...
- scrapy (三) : 请求传参
scrapy 请求传参 1.定义数据结构item.py文件 ''' field: item.py ''' # -*- coding: utf-8 -*- # Define here the model ...
- python 面试题一:Python语言特性
1 Python的函数参数传递 两个例子 a = 1 def fun(a): a = 2 fun(a) print a # a = [] def fun(a): a.append(1) fun(a) ...
- Mariadb之主从复制的读写分离
首先我们来回顾下代理的概念,所谓代理就是指的是一端面向客户端,另外一端面向服务端,代理客户端访问服务端,我们把这种代理叫正向代理:代理服务端响应客户端我们叫做反向代理,这个我们在之前nginx系列博客 ...
- POJ 1057 File Mapping 最详细的解题报告
题目来源:POJ 1057 File Mapping 题目大意:像我的电脑那样显示文件夹和文件信息,其中在同一级目录内,文件夹排在文件的前面并且文件夹的顺序不变,同一级目录中文件按字母序排列.文件以‘ ...
- JavaScript 对象的创建和操作
<script> // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串. // 对象种类 // 内置对象(nativ ...
- LeetCode第4题:寻找两个有序数组的中位数
double Solution::findMedianSortedArrays(vector<int>& nums1, vector<int>& nums2) ...