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;

  }

});

结语：模型的自主操控之前已经讲过了，不再赘述，欢迎大家一起学习交流 需要测试模型的话 可以给我留言