Three 帧动画模块

在实际开发中，3D美术提供的三维模型可能包含帧动画数据需要你解析渲染，比如一个机械的装配过程，一个车门开关的动作，一个物体的移动动画。这时候你首先要对建立帧动画的概念，然后对Threejs帧动画相关的API使用规则进行熟悉，这样才能很好的解析加载的外部模型包含的帧动画。

编辑关键帧并解析播放

Threejs提供了一系列用户编辑和播放关键帧动画的API,例如关键帧KeyframeTrack、剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer。

为了让大家更好的理解关键帧动画，本节课不加载外部模型的帧动画数据，使用关键帧KeyframeTrack和剪辑AnimationClip编写一个关键帧动画，然后调用操作AnimationAction、混合器AnimationMixer播放编写好的关键帧动画。

创建两个用于动画的网格模型

先创建两个用于关键帧动画的网格模型。

/**
 * 创建两个网格模型并设置一个父对象group
 */
mesh1.name = "Box"; //网格模型1命名
mesh2.name = "Sphere"; //网格模型2命名
group.add(mesh1); //网格模型添加到组中
group.add(mesh2); //网格模型添加到组中

在线运行案例

解析外部模型的帧动画

本节课通过一个案例来展示Threejs如何加载并播放外部模型中的帧动画数据。

关键帧数据

如果有兴趣，你可以打开模型文件model.json查看里面与帧动画有关的关键帧数据。

"object": {
  // 绑定动画的模型名称Box
  "name": "Box",
...
},
// 动画数据
"animations": [{
  "name": "default",
  "fps": 24,
  "tracks": [
    // 位置变化关键帧
    {
    "type": "vector3",
    "name": "Box.position",
    "keys": [{
      "value": [0, 0, 0],
      "time": 0
    }, {
      "value": [-100, 0, 0],
      "time": 50
    },...]
  },
  // 角度变化关键帧
  {
    "type": "quaternion",
    "name": "Box.quaternion",
    "keys": [{
      "value": [0, 0, 0, 0],
      "time": 0
    },...]
  },
  // 颜色变化关键帧
  {
    "type": "color",
    "name": "Box.material.color",
    "keys": [{
      "value": [1, 0, 0, 1],
      "time": 20
    }, ...]
  }]
}]

播放模型帧动画

// 通过ObjectLoader加载模型文件model.json
var loader = new THREE.ObjectLoader();
var mixer = null; //声明一个混合器变量
// 加载文件返回一个对象obj
loader.load("model.json", function(obj) {
  obj.scale.set(15, 15, 15);//缩放加载的模型
  scene.add(obj);
  // obj作为混合器的参数，可以播放obj包含的帧动画数据
  mixer = new THREE.AnimationMixer(obj);
  // obj.animations[0]：获得剪辑clip对象
  // // 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
  var AnimationAction = mixer.clipAction(obj.animations[0]);
  AnimationAction.play();
});

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
 
  if(mixer!==null){
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    mixer.update(clock.getDelta());
  }
}
render();

播放设置

你可以通过操作AnimationAction的相关属性设置播放效果。

//不循环播放(默认是循环播放)
AnimationAction.loop = THREE.LoopOnce;

//暂停在最后一帧播放的状态
AnimationAction.clampWhenFinished=true;

播放设置(暂停、时间段、时间点)

你可以通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer完成一些播放效果。

播放/暂停(.paused属性)

HTML按钮和点击事件代码：

<button onclick="pause()" type="button" style="position: absolute;padding: 10px;">暂停/继续</button>
<script>
  // 暂停继续播放函数
  function pause() {
    if (AnimationAction.paused) {
      // 如果是播放状态，设置为暂停状态
      AnimationAction.paused = false;
    } else {
      // 如果是暂停状态，设置为播放状态
      AnimationAction.paused = true;
    }
  }
</script>

在线运行案例

播放clip特定时间段

/**
 * 播放编辑好的关键帧数据
 */
var mixer = new THREE.AnimationMixer(mesh); //创建混合器
var AnimationAction = mixer.clipAction(clip); //返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态
// 设置播放区间10~18   关键帧数据总时间是20
AnimationAction.time = 10; //操作对象设置开始播放时间
clip.duration = 18;//剪辑对象设置播放结束时间
AnimationAction.play(); //开始播放

在线运行案例

定位在某个时间点

// 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time = 10; //操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间

/**
 * 播放编辑好的关键帧数据
 */
var mixer = new THREE.AnimationMixer(mesh); //创建混合器
var AnimationAction = mixer.clipAction(clip); //返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态
// 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time = 10; //操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play(); //开始播放

在线运行案例

快进(按钮递增时间点)

<button onclick="pos()" type="button" style="position: absolute;padding: 10px;">时间递增</button>
<script>
  // 时间点设置函数
  function pos() {
    // 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
    AnimationAction.time += 2; //操作对象设置开始播放时间
    clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
    AnimationAction.play(); //开始播放
  }
</script>

控制部分：

/**
 * 播放编辑好的关键帧数据
 */
var mixer = new THREE.AnimationMixer(mesh); //创建混合器
var AnimationAction = mixer.clipAction(clip); //返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态

在线运行案例

滚动条拖动播放帧动画

通过一个滚动条拖动播放帧动画，就像你观看视频一样，有一个视频条可以拖动。

关于前端滚动条的代码，这里使用的是H5原生的range控件。

<input type="range" id="rg" value="10" min="0" max="20" step="1" onchange="changeV()" />
<script>
function changeV() {
	var boxL = parseInt(document.getElementById('rg').value);
	AnimationAction.time = boxL; //操作对象设置开始播放时间
	clip.duration = boxL;//剪辑对象设置播放结束时间
	AnimationAction.play(); //开始播放
}
</script>

在线运行案例

转载本站内容时，请务必注明来自W3xue，违者必究。