初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

9章アニメーションとカメラの移動

これまでの章でも簡単なアニメーションはありましたが、複雑なものはありませんでした。「1章 初めての3Dシーン作成」で基本的な描画ループを導入した際に、いくつかの単純なオブジェクトを回転したり、他の簡単なアニメーションのコンセプトを紹介しました。この章ではThree.jsでアニメーションがどのようにサポートされているかについてもう少し詳細に説明します。具体的には次の4つの内容を詳しく見ていきます。

• 基本のアニメーション
• カメラの移動
• モーフィングとスキンメッシュアニメーション
• 外部アニメーションの読み込み

まずはアニメーションの基本コンセプトの紹介から始めましょう。

9.1　基本的なアニメーション

サンプルの紹介に入る前に、「1章 初めての3Dシーン作成」で学んだ描画ループについて簡単に見なおしておきましょう。アニメーションをサポートするにはThree.jsにシーンを定期的に更新するように伝える必要があります。それには次のようにHTML5標準のrequestAnimationFrame関数を使用します。

render();

function render() {
  // シーンを描画
  renderer.render(scene, camera);

  // requestAnimationFrameを使用して次の描画をスケジューリングする
  requestAnimationFrame(render);
}

このコードのとおり、最初にシーンを初期化する時にrender()関数を一度呼び出すだけです。render()関数内ではrequestAnimationFrameを使用して次の描画をスケジューリングします。この方法を使用した場合、render() ...