今回から取組むお題は、Away3D TypeScriptの「Examples」からいただく「Animating particles simulating fire」だ(図1)。ただ、本論に入る前に説明しなければならないことがある。Away3Dのライブラリが2015年3月13日付で改められた。そのJavaScriptファイルに差し替えると、この連載でこれまで書いたコードがおおかた動かなくなる。今回は、その解説にあてたい。
床の平面にテクスチャを貼ってカメラで回り込む
とはいえ、お題からまったく離れてしまう訳ではない。この連載をずっと読んできた方は、お題の床に見覚えがあろう(再掲第4回図2)。床の平面にテクスチャを貼って、カメラで回り込むスクリプトは、第4回コード3「HoverControllerオブジェクトによるカメラのパンとチルトをマウスドラッグで動かす」からほぼそのまま抜き出して使うつもりだった。
ところが、前述のとおり、このコードは新ライブラリでは動かない。そこで、今回は新たなビルドでコードを書き改めることにする。まずは、第4回コード3から、床にテクスチャを与えて、カメラが回り込むスクリプトを抜き出したのが以下のコード1だ。これまでのライブラリを使えば、床の平面に石畳のテクスチャが貼られて、ドラッグするとカメラが回り込む(図1)。
新ライブラリで動くように書替える
ところが、新しいライブラリに差し替えて前掲コード1を試すと床が表れない。ブラウザの開発ツールで確かめると、TriangleMethodMaterialクラスが見つからないというエラーが示される(図3)。したがって、TriangleMethodMaterialクラスのコンストラクタも呼び出せないということだ。
たしかに、awayjs-methodmaterialsのライブラリからTriangleMethodMaterialとTriangleMaterialModeのふたつのクラスがなくなっている。そして、新ライブラリには、MethodMaterialとMethodMaterialModeというクラスが替わりに納められていた(図4)。したがって、この書替えをしなければならない。
図4 awayjs-methodmaterialsライブラリの中身が変わった
さらに調べてみると、新たなクラスをあとふたつ加えることになった。前掲コード1のrequire()関数のコードがどう書き替わるのかを先に示しておこう。つぎのように、クラスTriangleMethodMaterialはMethodMaterialに差し替え、さらにふたつのクラスDefaultMaterialManagerとMethodRendererPoolを追加した。
クラスTriangleMethodMaterialと差し替えるMethodMaterialのコンストラクタには、引数としてテクスチャを渡す。そして、デフォルトのテクスチャは、DefaultMaterialManager.getDefaultTexture()メソッドで得る。したがって、MethodMaterial()コンストラクタはつぎのように呼び出す。すると、前掲コード1の平面をつくる関数(createPlane())は、以下のように書き替えなければならない。
もうひとつ、View()コンストラクタに渡すDefaultRendererオブジェクトも、つくり方が変わった。DefaultRenderer()コンストラクタには、引数にMethodRendererPoolクラスを渡すことになった。したがって、前掲コード1のViewオブジェクトをつくる関数(createView())は、以下のように書き替える。
前掲コード1にこれらの書き替えを加えたのがつぎのコード2だ。新しい2015年3月13日付ライブラリのもとで、石畳のテクスチャが貼られた床の周囲をドラッグでカメラが回り込む。あわせて、サンプル1をjsdo.itに掲げた。
これまで書いたコードを新ライブラリで動かすには
この連載でこれまで書いたコードを2015年3月13日付ライブラリで動かすにはどう書き替えればよいか。
前掲コード2の下敷きにした第4回コード3「HoverControllerオブジェクトによるカメラのパンとチルトをマウスドラッグで動かす」は、第1回から都合4回かけて仕上げたお題だ。これは、前述の直しを入れればビーチボールを含めて正しく動く。
また、第7回からつくり始めて前回でき上がった第10回コード2「マウスポインタの画面中央からの座標に応じてカメラを水平および垂直に動かす」も同じように書き替えればよい。参考までに、サンプル2としてjsdo.itに掲げた。
第5回と第6回で書き上げたお題の第6回コード3「背景の映り込んだドーナッツ型を上下左右にに回るカメラで捉える」については、前述の修正に加えてSkyboxMaterialクラスがなくなった。そして、Skybox()コンストラクタには、素材のキューブマップがそのまま渡せるようになった。そのため、スカイボックスをつくる関数(setupSkybox())はつぎのように書き替えることになる。
2015年3月13日付Away3D TypeScriptについては、とりあえずこれくらい説明すればよいだろう。さて次回は、床にパーティクルを加えたい。