ThreeJS创建关键帧动画

        之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性，另一种方式是用tweenJs，这个使用起来简单，但是缺点要另外引入tweenjs才可以使用，还有一种是threejs自带的动画实现效果，叫关键帧动画，这节补上。

        了解关键帧动画之前要了解其中几个重要的概念，

KeyframeTrack 关键帧轨道：

关键帧轨道用来制作一组动画，用来在这组动画中动态修改模型某一个属性的值，最终形成动画，比如可以修改模型的位置，修改模型的材质颜色等，KeyframeTack的入参如下

KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )

name - 关键帧轨道(KeyframeTrack)的标识符
times - 关键帧的时间数组, 被内部转化为 Float32Array
values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array
interpolation - 使用的插值类型
同时，threejs提供多种KeyFrameTrack的子类，来展示各种不用的属性值改变，包括：
VectorKeyframeTrack:向量类型的关键帧轨道，ColorKeyframeTrack:反应颜色变化的关键帧轨道
，BooleanKeyframeTrack:布尔类型的关键帧轨道，NumberKeyframeTrack:数字类型的关键帧轨道，QuaternionKeyframeTrack:四元数类型的关键帧轨道，StringKeyframeTrack:字符串类型的关键帧轨道。

AnimationClip 动画剪辑

动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它用来定义动画，它的入参如下

AnimationClip( name : String, duration : Number, tracks : Array )
name - 此剪辑的名称
duration - 持续时间 (单位秒). 如果传入负数, 持续时间将会从传入的数组中计算得到。
tracks - 一个由关键帧轨道（KeyframeTracks）组成的数组。AnimationClip里面，每个动画属性的数据都存储在一个单独的KeyframeTrack中。

Animation Mixer 动画混合器

动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器，它的入参如下：AnimationMixer( rootObject : Object3D )
rootObject - 混合器播放的动画所属的对象。

AnimationAction 动画动作

AnimationActions 用来调控制存储在AnimationClips中的动画。通过配置AnimationAction，我们可以决定何时播放、暂停或停止其中一个混合器中的某个AnimationClip， 这个AnimationClip是否需要重复播放以及重复的频率， 是否需要使用淡入淡出或时间缩放，以及一些其他内容。它的入参如下：AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D )

mixer - 被此动作控制的 动画混合器
clip - 动画剪辑 保存了此动作当中的动画数据
localRoot - 动作执行的根对象

下面放完整代码，可以直接复制到html中运行，不过记得添加上两个js文件

实现的效果如下

关键帧动画视频