Three.js - 用 morphTargets 制作变形动画

1、动画的两种方式

首先，了解一下变形动画 和 骨骼动画

• 变形动画
  通过变形目标morphTargets，或者说是关键位置，这些位置都会被存储下来，让所有顶点从一个位置变化到另一个位置，并重复该过程。
• 骨骼动画
  骨骼即是网格的骨头，把所有顶点绑定到特定的骨头上，当移动骨头时所有的顶点会跟着移动，网格的变形基于骨头的位置，移动和缩放比例。
  以上两种方式three.js都支持。

2、变形动画示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180904/02-morph-animation.html
效果

3、通过 morphTargets 制作变形动画

morphTargets 是制作动画的最直接的方法，但是这种方法有一个不足，就是对于大型的模型和大型动画，模型的文件会变得很大，因为每个变形都需要储存一下所有的顶点，示例是一匹马在奔跑。
首先，看一下模型文件horse.json
首先模型文件中需要包含变形目标morphTargets

3.1、模型文件

"morphTargets": [
	{
    "name": "horse_A_001", "vertices":...},
	{
    "name": "horse_A_002", "vertices":...},
	{
    "name": "horse_A_003", "vertices":...},
	{
    "name": "horse_A_004", "vertices":...},
	......
]

3.2、实现步骤

3.2.1 引入json格式的模型文件

let loader = new THREE.JSONLoader();
loader.load('../../models/json/horse.json', function (geometry) {
   

     let material = new THREE.MeshLambertMaterial({
   

         morphTargets: true,
         vertexColors: THREE.FaceColors,

     });

     let horse = new THREE.Mesh(geometry, material);

     horse.scale.set(0.2, 0.2, 0.2);

     scene.add(horse);
}

注意
声明材质时候，需要把morphTargets设置为true，否则无法实现动画效果。

3.2.2 创建场景合成器THREE.AnimationMixer()

THREE.AnimationMixer()
是场景合成器，用来在特定的场景中的象实现动画的合成，当场景中有很多对象的时候，可以为每个对象都指定一个THREE.AnimationMixer()

mixer = new THREE.AnimationMixer(horse);

3.2.3 调用 THREE.AnimationClip的静态方法CreateFromMorphTargetSequence

THREE.AnimationClip()
是一组可以重复使用的关键帧，每一帧组合起来就是一个动画

let clip = THREE.AnimationClip.CreateFromMorphTargetSequence('run', horse.geometry.morphTargets, 30);

通过CreateFromMorphTargetSequence创建动画序列。

3.2.4 执行动画并设置 fps 值