09-Threejs正確處理動畫運(yùn)動-視頻教程鏈接

為了最好的利用性能和渲染效果，那么我們只需要在繪制每一幀畫面的時(shí)候，計(jì)算需要渲染的畫面即可。這個(gè)時(shí)候就可以使用window.requestAnimationFrame方法。

1.1 使用方式

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行。

1.2 請求動畫幀間隔不固定

當(dāng)你準(zhǔn)備更新動畫時(shí)你應(yīng)該調(diào)用此方法。這將使瀏覽器在下一次重繪之前調(diào)用你傳入給該方法的動畫函數(shù) (即你的回調(diào)函數(shù))。回調(diào)函數(shù)執(zhí)行次數(shù)通常是每秒 60 次，但在大多數(shù)遵循 W3C 建議的瀏覽器中，回調(diào)函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。因此具體回調(diào)函數(shù)執(zhí)行的間隔時(shí)間跟屏幕刷新次數(shù)、當(dāng)前頁面運(yùn)行時(shí)負(fù)荷等因素有關(guān)。

1.2.1 解決確保不同幀率的畫面運(yùn)行速度一致

回調(diào)函數(shù)會被傳入DOMHighResTimeStamp參數(shù)，DOMHighResTimeStamp指示當(dāng)前被 requestAnimationFrame() 排序的回調(diào)函數(shù)被觸發(fā)的時(shí)間。

請確?？偸鞘褂玫谝粋€(gè)參數(shù) (或其它獲得當(dāng)前時(shí)間的方法) 計(jì)算每次調(diào)用之間的時(shí)間間隔，否則動畫在高刷新率的屏幕中會運(yùn)行得更快。

代碼執(zhí)行后，我們通過輸出可以看出，每一幀間隔非常相近，但又不同。

為了確保不同時(shí)間間隔，運(yùn)動的速度一致，那么應(yīng)該按照

移動距離 = 速度 * 時(shí)間

那么如果想要1m/s的速度遠(yuǎn)離原點(diǎn)的勻速運(yùn)動，那么就按照這么編寫代碼

2 綜合上述代碼

1、在前面創(chuàng)建的項(xiàng)目中的main.js文件寫入代碼，實(shí)現(xiàn)每5秒，即從原點(diǎn)出發(fā)勻速在x軸進(jìn)行1m/s的勻速運(yùn)動

效果演示：