requestAnimationFrameは再描画が頻繁に行われる処理に使えるメソッド。three.jsを勉強しているときにオブジェクトを回転させるときとかに使われているので調べてみました。
比較されるものとしてsetInteval、setTimeoutがありますが、ブラウザで準備ができていなくても必ず実行、タブが非アクティブでも実行され、メモリリークの原因になるそうです。
一方でrequestAnimationFrameはタブが非アクティブ時のときは実行されなかったり、再描画が行われる前に次のアニメーションをする関数を呼び出すといった特徴があります。
また、ブラウザの描画更新単位と同じ単位で呼び出されるため、ブラウザごとの差異があることに注意。
よく見るサンプルがこんな感じ。
const loop = () => {
requestAnimationFrame(loop)
mesh.rotation.x += 0.01
mesh.rotation.y += 0.01
renderer.render(scene, camera);
}
これでも動きますが、60fpsの環境では1秒間に0.6まで動く一方、30fpsの環境では1秒間に0.3とブラウザによって動きが違ってくる可能性があります。
そこで時間ベースのアニメーションが必要になります。
const loop = () => {
requestAnimationFrame(loop)
const sec = performance.now() / 1000
mesh.rotation.x = sec * (Math.PI / 4)
mesh.rotation.y = sec * (Math.PI / 4)
renderer.render(scene, camera)
}
performance.now()はページ表示時からの経過時間がミリ秒で返ってきます。