Three.js（十一）—— 帧动画模块
文章目录
- 11、帧动画模块
-
- 11.1 编辑关键帧并解析播放
-
- 创建两个用于动画的网格模型
- 编辑关键帧
- 播放关键帧
- 11.2 解析外部模型的帧动画
-
- 关键帧数据
- 播放模型帧动画
- 播放设置
- 11.3 播放设置(暂停、时间段、时间点)
-
- 播放/暂停(.paused属性)
- 播放clip特定时间段
- 定位在某个时间点
- 快进(按钮递增时间点)
- 滚动条拖动播放帧动画
11、帧动画模块
11.1 编辑关键帧并解析播放
创建两个用于动画的网格模型
/**
* 创建两个网格模型并设置一个父对象group
*/
mesh1.name = "Box"; //网格模型1命名
mesh2.name = "Sphere"; //网格模型2命名
group.add(mesh1); //网格模型添加到组中
group.add(mesh2); //网格模型添加到组中
编辑关键帧
下面代码中的关键帧动画是通过关键帧KeyframeTrack和剪辑AnimationClip两个API来完成，实际开发中如果需要制作一个复杂三维模型的帧动画，比如一个人走路、跑步等动作，一般情况是美术通过3dmax、blender等软件编辑好，不需要程序员用代码实现。
/**
* 编辑group子对象网格模型mesh1和mesh2的帧动画数据
*/
// 创建名为Box对象的关键帧数据
var times = [0, 10]; //关键帧时间数组，离散的时间点序列
var values = [0, 0, 0, 150, 0, 0]; //与时间点对应的值组成的数组
// 创建位置关键帧对象：0时刻对应位置0, 0, 0 10时刻对应位置150, 0, 0
var posTrack = new THREE.KeyframeTrack('Box.position', times, values);
// 创建颜色关键帧对象：10时刻对应颜色1, 0, 0 20时刻对应颜色0, 0, 1
var colorKF = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
// 创建名为Sphere对象的关键帧数据 从0~20时间段，尺寸scale缩放3倍
var scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);
// duration决定了默认的播放时间，一般取所有帧动画的最大时间
// duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放
var duration = 20;
// 多个帧动画作为元素创建一个剪辑clip对象，命名"default"，持续时间20
var clip = new THREE.AnimationClip("default", duration, [posTrack, colorKF, scaleTrack]);
播放关键帧
下面代码是通过操作AnimationAction和混合器AnimationMixer两个API播放已有的帧动画数据。
混合器THREE.AnimationMixer()的参数是案例代码中编写的两个网格模型的父对象group，实际开发中参数Group也可以是你加载外部模型返回的模型对象。
/**
* 播放编辑好的关键帧数据
*/
// group作为混合器的参数，可以播放group中所有子对象的帧动画
var mixer = new THREE.AnimationMixer(group);
// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
var AnimationAction = mixer.clipAction(clip);
//通过操作Action设置播放方式
AnimationAction.timeScale = 20;//默认1，可以调节播放速度
// AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.play();//开始播放
播放关键帧动画的时候，注意在渲染函数render()中执行mixer.update(渲染间隔时间)告诉帧动画系统Threejs两次渲染的时间间隔，获得时间间隔可以通过Threejs提供的一个时钟类Clock实现。
// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
//clock.getDelta()方法获得两帧的时间间隔
// 更新混合器相关的时间
mixer.update(clock.getDelta());
}
render();
11.2 解析外部模型的帧动画
关键帧数据
"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.loop = THREE.LoopOnce;
11.3 播放设置(暂停、时间段、时间点)
你可以通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer完成一些播放效果。
播放/暂停(.paused属性)
<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; //暂停在最后一帧播放的状态
滚动条拖动播放帧动画
通过一个滚动条拖动播放帧动画，就像你观看视频一样，有一个视频条可以拖动。
关于前端滚动条的代码你可以随意找一个都可以，课程案例中直接用vue UI库element-ui的滚动条组件。
<div id="app">
<div class="block" style="display:inline;width:500px">
<el-slider v-model="time" show-input :max=20 :step=0.01></el-slider>
</div>
</div>
<script>
...
...
var mixer = new THREE.AnimationMixer(mesh);
var AnimationAction = mixer.clipAction(clip);
AnimationAction.loop = THREE.LoopOnce;
AnimationAction.clampWhenFinished = true;
//实例化vue
vm = new Vue({
el: "#app",
data: {
time: 0,
},
watch: {
time:function (value) {
// 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time = value; //操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play(); //开始播放
}
},
})
</script>