[UIデザイナーが学ぶ]Three.jsのアニメーションの基本的な話

普段はメーカーでプログラムなど一切書かないUIデザイナーとして勤務しております。

あまり業務では利用しませんが、Three.jsのアニメーションについて学び直しているので、備忘録的にまとめています。

アニメーションといっても、フレームレートでレンダリングを繰り返す部分のみ説明となり、複雑なアニメーションについては言及しておりません。

アニメーションの実装方法について

Three.jsでアニメーションを実装する方法はいくつかあります。
以下が候補です。
結論から言うとTHREE.Timerクラスをおすすめします。

• requestAnimationFrameだけを利用する

• THREE.Clockクラスを利用する

• THREE.Timerクラスを利用する

それぞれの特徴

上記を利用してループ処理を行いアニメーションを行います。

requestAnimationFrameだけを利用する

requestAnimationFrameを利用する場合はこんな感じ。

requestAnimationFrameは、実行環境のスペックに依存してしまいます。
高フレームレートのコンピューターでテストすると、立方体の回転が速くなり、低フレームレートでテストすると、立方体の回転が遅くなります。

const tick = () => {
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

tick();

◎メリット

• ブラウザ最適化:
  ブラウザが最適なタイミングで描画を行うため、スムーズなアニメーションが実現できます。

• 省エネルギー:
  タブが非アクティブな場合、アニメーションの更新が停止するため、リソースの節約になります。

• シンプル:
  基本的なアニメーションループを実装するのが簡単です。

◎デメリット

• 手動管理:
  時間の経過やフレームレートを手動で管理する必要があります。

THREE.Clockクラスを利用する

THREE.Clockを利用した場合、回転は経過した時間に基づいて行われるため、フレーム レートに関係なく、すべての画面とすべてのコンピューターで回転速度が同じになります。

const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  mesh.rotation.y = elapsedTime;
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

tick();

◎メリット

• 時間管理:
  経過時間を簡単に取得できるため、アニメーションのタイミング管理が容易です。

• フレームレート独立:
  フレームレートに依存しないアニメーションが実現できます。

◎デメリット

• 追加のコード:
  Clockクラスのインスタンスを作成し、経過時間を取得するための追加のコードが必要です。

THREE.Timerクラスを利用する

import { Timer } from 'three/addons/misc/Timer.js'

const timer = new Timer()

const tick = () =>
{
    timer.update()
    const elapsedTime = timer.getElapsed()
    mesh.rotation.y = elapsedTime;
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}

tick()

◎メリット

• タイマー機能:
  特定の時間間隔でアクションを実行するのに便利です。

• タブの非アクティブ:
  タブが非アクティブかどうかを判定して、非アクティブの場合に大きな時間デルタ値(前フレームと今フレームの時間間隔)を回避します。

◎デメリット

• サポートの有無:
  THREE.TimerクラスはThree.jsの標準ライブラリには含まれていないため、　読み込みが必要です。

今回は基本の中の基本の部分のみまとめました。

GSAPなどのアニメーションライブラリを利用したとしても、一定間隔で連レンダリングを行わない限り、画面上に反映できないのでまずはレンダリングを安定して行うことが重要かもしれません。