threejs--模型动画线性控制
最近遇见一个比较有意思需求，需要将模型动画像视频一样可以线性拖拽播放动画进程、调节动画播放速度及随时暂停和播放动画。效果如下图
现在开始干货分享：
1. 初始化场景、相机、灯光、及模型加载的基本工作就不再赘述了，不太清楚的朋友看下threejs--初创项目。
2. 需要一个k好动画的模型，这个大家可以自己完成
3. 我们需要一个可以自由滑动的滑块，用来记录动画播放的进程。还需要一个暂停和播放的按钮来控制动画的开启和暂停
<p class="h_manualDrop"><span>装配进度</span><input class="h_manualInstallVal" type="range" min="0" step="0.01"></p>
4. 模型加载阶段 我们需要对模型动画进行处理
load.loader('./model/test.glb,function(gl){
scene.add(gl.scene)//将模型加入到场景中
mixer =new THREE.AnimationMixer(gl.scene);
action = mixer.clipAction(gl.animations[0]);
action.play();///
$('.h_manualInstallVal').attr('max',glb.animations[0].duration.toFixed(1));// 给滑块初始值
renderer.render( scene, camera );//渲染
})；
5. 在刷新场景时同步滑块上动画进度
function onUpdate() {
let renderTime = clock.getDelta();
if (action) {// 实时更新滑块进度
$('.h_manualInstallVal').val(action.time);
}
if (mixer) {
mixer.update(renderTime);
}
requestAnimationFrame( onUpdate );
renderer.render( scene, camera );
controls.update();// 想让相机控制器有效 这个就需要实时更新控制器。必须在摄像机的变换发生任何手动改变后调用
}
6. 滑块添加事件，反向控制模型动画播放进度
$('.h_manualInstallVal').on('input',function (){
action.time=$(this).val()*1;
action.paused=true;
$('.h_manualDrop').attr('data-bool','act');
})
7. 播放暂停按钮控制动画的播放与暂停
$('.h_manualDrop').on(‘click',function (){// 动画 播放与暂停
if($(this).attr('data-bool')=='act'){
$(this).attr('data-bool','');
action.paused=false;
}else{
$(this).attr('data-bool','act');
action.paused=true;
}
});
结语：模型的自主操控之前已经讲过了，不再赘述，欢迎大家一起学习交流 需要测试模型的话 可以给我留言
