动画系统

概述

在Verge3D动画系统中，您可以为模型的各种属性设置动画： skinned and rigged model 的骨骼，变形目标，不同的材质属性（颜色，不透明度，布尔值），可见性和变换。动画属性可以淡入、淡出、交叉淡化和扭曲。在相同或不同对象上同时发生的动画的权重和时间比例的变化可以独立地进行。相同或不同物体的动画，也可以同步发生。

为在一个同构系统中实现所有这一切，Verge3D所依赖的 Three.JS 动画系统已经在2015年就彻底改变了（要注意过时的信息！），它现在有一个与 Unity/UE4 引擎类似的架构。此页面简要阐述了这个系统中的主要组件以及它们如何协同工作。

Animation Clips | 动画片段

如果您已成功导入3D动画对象（无论它是否有骨骼或变形目标或两者皆有都不要紧）—— 例如使用 glTF Blender exporter 从Blender导出它并使用 GLTFLoader 将其加载到Verge3D场景中 —— 其中一个响应字段应该是一个名为"animations"的数组，其中包含此模型的 AnimationClips （请参阅下面可用的加载器列表）。

每个AnimationClip通常保存对象某个活动的数据。举个例子，假如mesh是一个角色，可能有一个AnimationClip实现步行循环，第二个AnimationClip实现跳跃，第三个AnimationClip实现闪避等等。

关键帧轨道

在这样一个 AnimationClip 中，每个动画属性的数据存储在一个单独的 KeyframeTrack 中。假设一个角色对象有 skeleton （骨架），一个关键帧轨道可以存储下臂骨骼位置随时间变化的数据，另一个轨道追踪同一块骨骼的旋转变化，第三个追踪另外一块骨骼的位置、转角和尺寸，等等。应该很清楚， AnimationClip 可以由许多这样的轨道组成。

假设模型具有变形目标（例如一个变形目标显示一个笑脸，另一个显示愤怒的脸），每个轨道都持有某个变形目标在AnimationClip运行期间产生的 influence（变形目标影响）如何变化的信息。

动画混合器

存储的数据仅构成动画的基础 —— 实际播放由 AnimationMixer 控制。您可以想象这不仅仅是动画的播放器，而是作为硬件的模拟，如真正的调音台，可以同时控制和混合若干动画。

动画行为

AnimationMixer本身只有很少的（大体上）属性和方法，因为它可以通过 AnimationAction 来控制。通过配置 AnimationAction ，您可以决定何时播放、暂停或停止其中一个混合器中的某个 AnimationClip ，这个 AnimationClip 是否需要重复播放以及重复的频率，是否需要使用淡入淡出或时间缩放，以及一些其他内容（例如交叉渐变和同步）。

动画对象组

如果希望一组对象接收共享的动画状态，可以使用一个 AnimationObjectGroup 。

支持的格式和加载器

注意，并不是所有的模型格式都包含动画（尤其是OBJ不会包含），而且只有部分Verge3D加载器支持 AnimationClip 序列。以下几个确实支持此动画类型：

v3d.ObjectLoader
v3d.BVHLoader
v3d.ColladaLoader
v3d.FBXLoader
v3d.GLTFLoader
v3d.MMDLoader

请注意，3ds max 和 Maya 当前无法直接导出多个动画（即不在同一时间线上的动画）到一个文件中。

示例：


      let mesh;
  
      // Create an AnimationMixer, and get the list of AnimationClip instances
      const mixer = new v3d.AnimationMixer(mesh);
      const clips = mesh.animations;
  
      // Update the mixer on each frame
      function update () {
        mixer.update(deltaSeconds);
      }
  
      // Play a specific animation
      const clip = v3d.AnimationClip.findByName(clips, 'dance');
      const action = mixer.clipAction(clip);
      action.play();
  
      // Play all animations
      clips.forEach(function(clip) {
        mixer.clipAction(clip).play();
      });