专栏首页郭先生的博客three.js 自制骨骼动画(二)

three.js 自制骨骼动画(二)

上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击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. 创建关键帧轨道

关键帧轨道(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);

在需要播放动画的时候调用actionn.play()即可播放动画了,你看他跑的多high啊,是不是很简单。

最近文章有点难写,欢迎three.js的萌新提问,我会在下一期试着给出答案哦,如果没有,我就会在接下来的一段时间说一说three.js着色器材质,我相信这是一个十分有意思和具有挑战性的知识。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

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页面/软件/游戏的开发者,也需要把...

    WendyGrandOrder
  • 实战 Spine 骨骼动画,教你如何换皮游戏动画!

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

    张晓衡
  • 个性萌宠诞生记-动作篇

    腾讯ISUX
  • 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的战斗,同屏...

    Layabox Charley
  • Morph动画的转移

    逍遥剑客
  • SceneKit绘制模型与骨骼动画的实现

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

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

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

    2020labs小助手

扫码关注云+社区

领取腾讯云代金券