ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

WebGL と JavaScript で学ぶ3D表現

Three.jsでES2015のclassを利用する(メソッド編)

この解説はThree.jsでES2015のclassを利用する(継承)からの続きです。クラスのメソッドを呼び出すベスト・プラクティスな例を学んでいきましょう。

クラスのメソッドを利用する

時間経過でグループのアニメーションをさせたい場合の方法を紹介します。

時間経過はrequestAnimationFrame()メソッドを使いたいところですが、いたる所にrequestAnimationFrame()メソッドを記述するのはベストプラクティスとは言えません。複数のrequestAnimationFrame()メソッドがあったときに、どれがはじめに実行されるのか、処理の実行順がわかりにくいからです。また、負荷の観点からも複数のrequestAnimationFrame()メソッドを定義するのは最適とは言えません。

悪い例

良くないコード例から見てみます。

// 独自グループを作る
const myGroup = new MyGroup();
scene.add(myGroup);

tick();

// 毎フレーム時に実行されるループイベントです
function tick() {

  // レンダリング
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}

/** メッシュを継承した独自グループのクラスです。 */
class MyGroup extends THREE.Object3D {

  /** コンストラクターです。 */
  constructor() {
    super();
    // 任意の処理
    this.update();
  }

  /** 更新命令を定義します。 */
  update() {
    requestAnimationFrame(this.update);
  }
}

良くないのは親となるコードにも、子供のクラスにもrequestAnimationFrame()が使われているところです。うまく動くと思いますが、どちらのrequestAnimationFrame()が先に実行されるのか、明示的にわからなくなります。メインコードにレンダリングのためのrenderer.render(scene, camera);処理がありますが、その処理の実行前後で子供のMyGroupが実行されるか、保証されません。

改善例

メインとなるコードに一つだけrequestAnimationFrame()メソッドを用意し、そこからツリー構造で独自メソッドを叩いていくといいでしょう。

良い例

// 独自グループを作る
const myGroup = new MyGroup();
scene.add(myGroup);

tick();

// 毎フレーム時に実行されるループイベントです
function tick() {

  // 更新命令を実行します。
  myGroup.update();

  // レンダリング
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}

/** メッシュを継承した独自グループのクラスです。 */
class MyGroup extends THREE.Object3D {

  /** コンストラクターです。 */
  constructor() {
    super();
    // 任意の処理
  }

  /** 更新命令を定義します。 */
  update() {
  }
}

こうすれば、requestAnimationFrame()メソッドが実行されるのはメインコードの一箇所のみになります。メインコードにレンダリングのためのrenderer.render(scene, camera);処理の前に子供のMyGroupクラスのupdate()メソッドが実行されることが保証されます。