在实际开发中,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,违者必究。