麒麟子Cocos Creator 3D研究笔记五：模型骨骼动画查看器

负一、先说两句

本文索引是负一开头，那是因为这一小节是最后加上来的。为了不牵一发动全身，就这样最好了。

写文章每次要自称的时候，麒麟子三个字打着太费劲，以后文章中，我就叫自己阿子吧。

大家从今天开始，多习惯习惯。

零、效果展示

这两天在研究Cocos Creator 3D骨骼动画部分，网上找了些模型。为了方便查看模型的各个动作，所以顺便写了这个模型&骨骼动画查看器。

项目包含了以下几个内容

1、QFW(qilinzi framework)框架最新版

2、天空盒设置、内置10款天空盒

3、第三人称摄相机控制器

4、一个主角模型以及配套的40个动画

拿到这套代码的小伙伴们，可以很容易地制作属于自己的DNF类ACT RPG，MMORPG等。

在线演示地址：http://showcase.ukylin.net/modelviewer/

一、资源与动画

如上图，@Cast @BattleStand等以@开头的FBX文件，就是我们模型的动画文件。每一个动画文件是独立的，且与模型文件是分离的。

这样做的好处是方便我们按需动态加载，并且美术在进行FBX导出的时候，可以更直观地管理这些动画文件。

这个套路是从Unity3D中发展出来的。已经被证明是非常适合的动画资源管理方式。

这样的管理方式，在Cocos Creator 3D中，还有一个更大的好处，就是H5项目可以延迟加载动画。比如一些NPC或者怪物的不常用动画，就可以等到使用的时候才加载。（主角为了体验感，一般还是预加载完了的）

Cocos Creator 3D骨骼动画继承自动画基类，因此它的使用方式和普通动画没有区别。只需要将骨骼动画拖到SkeletalAnimationComponent中即可。

播放代码超级简单，示例如下：

let animState = this._anim.getAnimationState(animName);
animState.repeatCount = isLoop ? Infinity : 1;
this._anim.play(animName);

注：repeatCount的值 Infinity表示无限循环，其余值表示要播多少次。

二、阴影

Cosos Creator 3D在1.2以前，只支持了平面阴影(Planar Shadow),正好适合我们项目这个只有一个Plane的场景。开启阴影只需要设置两个地方

1、场景属性里面，planarShodows开关打开

2、对应的Mesh节点的ModelComponent的ShadowCastingMode设置为ON

三、天空盒设置

为了查看不同环境下的效果，阿子把天空盒设置功能也放进来了。配合主界面上的 UseSkybox和UseIBL开关，可以很好地调节场景氛围。

四、第三人称摄相机

第三人称摄相机是角色类3D游戏必备的功能，Cocos Creator 3D的CameraComponent并未提供，所以花了时间写了一下。主要用到的就是向量转角度，角度转向量相关操作。

按住鼠标右键拖拽，可旋转摄相机

鼠标滚轮可拉进拉远摄相机

五、QFW(qilinzi framework)框架更新

随着不断的功能学习,QFW也进行了不少升级，增加了许多便利性。这个会在后面专门用一篇文章来解释。

六、总结

Cocos Creator 3D在骨骼动画部分，已经做得比较完善。基于顶点纹理的骨骼蒙皮也可以很轻松地突破寄存器限制和实现Instancing。只是动画融合部分还未添加进来，导致角色动作衔接不够流畅。不过这个功能应该马上就会出了，不会等太久。