Away3D TypeScript最新ビルドの基本的な変更点

Away3D TypeScript最新ビルドの基本的な変更点 [Edit]

投稿者：野中文雄 | 投稿日：2014.04.21 | [HTML5][野中ゼミ]

テクニカルノート「Away3D: 立方体を回してみる」は、2013年12月3日付のAway3D TypeScriptライブラリでスクリプトを書きました。最新ビルドは2014年3月18日に更新されています。そこで、ノートのサンプルコードを最新ビルドで書替えてみました。

01 Away3Dがふたつのライブラリになった

前に「Away3D TypescriptとWebGL」にご紹介したとおり、Away3D TypeScriptはふたつのライブラリで構成されるようになりました。したがって、script要素にJavaScript(JS)ファイルをふたつ読込みます。なお、新しいJSファイル名はすべて小文字です。

<!--
<script src="lib/Away3D.next.min.js"></script>
-->
<script src="lib/awayjs.next.min.js"></script>
<script src="lib/away3d.next.min.js"></script>

02 クラスView3DはViewに置換える

3次元空間を定めるクラスは、View3DからViewに変わりました。新たなViewクラスは引数にレンダラのオブジェクトを渡します。デフォルトとして、DefaultRendererクラスが備わっています。そのコンストラクタでオブジェクトをつくればよいでしょう。

// var view = new away.containers.View3D();
var view = new away.containers.View(new away.render.DefaultRenderer());

これらふたつの書替えを行ったのが、以下のjsdo.itのサンプル001です。前掲のノートのサンプル002「Away3D: Rotating a cube in the 3D space」からForkして修正を加えました。3次元空間の立方体がx軸とy軸で回ります(図001)。

図001■3次元空間の立方体が水平および垂直に回る

サンプル001■Away3D: Panning and tilting the camera in the 3D space

03 View.render()メソッドの呼出し

上述の2点を書替えるだけで、簡単に最新ビルドが動きました。そこで念のためにと、前掲ノートで立方体を回す前のサンプル001「Away3D: Cube in the 3D space」にも同じ書替えを加えてみました。すると、なんということでしょう！立方体が表れません。

サンプル002と違うのは、RequestAnimationFrame()コンストラクタに定めたコールバック関数で繰返し描画をしていないことです。試しに、再描画を繰返すと立方体が描かれました。View.render()メソッドの呼出しを遅らせないといけないのでしょうか。けれども、そのタイミングを確かめるためのイベントやプロパティは見当たりません。

少なくとも2回描画を繰返せば、表示はされました。ただ、つねに2回で足りるのか、確かではありません。ふと思い立って、View.render()メソッドの呼出しを単純に1行足し、2回にしてみました。結果、みごとに描画されました。これが以下のサンプル002です。

function initialize() {
	// ...[中略]...
	view.render();
	view.render();  // !!
}

サンプル002■Away3D: Cube in the 3D space

こういう仕様とは考えにくいです。おそらくバグだと思われます。Away3D TypeScriptのサイトからダウンロードされるサンプルコードはアニメーションばかりですので、気づかれなかったのかもしれません。

F-site