最近遇見一個(gè)比較有意思需求戈钢，需要將模型動(dòng)畫像視頻一樣可以線性拖拽播放動(dòng)畫進(jìn)程察署、調(diào)節(jié)動(dòng)畫播放速度及隨時(shí)暫停和播放動(dòng)畫。效果如下圖
現(xiàn)在開始干貨分享：
1. 初始化場(chǎng)景取逾、相機(jī)耗绿、燈光、及模型加載的基本工作就不再贅述了砾隅，不太清楚的朋友看下threejs--初創(chuàng)項(xiàng)目误阻。
2. 需要一個(gè)k好動(dòng)畫的模型，這個(gè)大家可以自己完成?
3. 我們需要一個(gè)可以自由滑動(dòng)的滑塊，用來記錄動(dòng)畫播放的進(jìn)程究反。還需要一個(gè)暫停和播放的按鈕來控制動(dòng)畫的開啟和暫停
<p class="h_manualDrop"><span>裝配進(jìn)度</span><input class="h_manualInstallVal" type="range" min="0" step="0.01"></p>
4. 模型加載階段 我們需要對(duì)模型動(dòng)畫進(jìn)行處理
load.loader('./model/test.glb,function(gl){
? ? scene.add(gl.scene)//將模型加入到場(chǎng)景中
? ?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. 在刷新場(chǎng)景時(shí)同步滑塊上動(dòng)畫進(jìn)度
function onUpdate() {
let renderTime = clock.getDelta();
if (action) {// 實(shí)時(shí)更新滑塊進(jìn)度
$('.h_manualInstallVal').val(action.time);
}
if (mixer) {
mixer.update(renderTime);
}
requestAnimationFrame( onUpdate );
renderer.render( scene, camera );
controls.update();// 想讓相機(jī)控制器有效 這個(gè)就需要實(shí)時(shí)更新控制器。必須在攝像機(jī)的變換發(fā)生任何手動(dòng)改變后調(diào)用
}
6. 滑塊添加事件精耐，反向控制模型動(dòng)畫播放進(jìn)度
$('.h_manualInstallVal').on('input',function (){
? action.time=$(this).val()*1;
? action.paused=true;
? $('.h_manualDrop').attr('data-bool','act');
})
7.? 播放暫停按鈕控制動(dòng)畫的播放與暫停
$('.h_manualDrop').on(‘click',function (){// 動(dòng)畫 播放與暫停
if($(this).attr('data-bool')=='act'){
$(this).attr('data-bool','');
? ? ? action.paused=false;
? }else{
$(this).attr('data-bool','act');
? ? ? action.paused=true;
? }
});
結(jié)語：模型的自主操控之前已經(jīng)講過了狼速，不再贅述，歡迎大家一起學(xué)習(xí)交流 需要測(cè)試模型的話 可以給我留言?
