分123Away3Dはオープンソースのリアルタイム3Dエンジンだ。Flashプラットフォーム向けに開発された。TypeScript」というJavaScriptライブラリに移植されはじめている。現在アルファリリースが公開されている。TypeScriptによる3次元表現を解説していきたい。その初めてのお題は,つぎのサンプル1のような床に置いたボールだ(※1⁠)⁠。ドラッグすると,カメラ位置を回すことができる。今回を含めた都合3回で仕上げたい。TypeScriptのライブラリには,バージョンおよびビルド番号がはっきりと書かれていない。そのため,サンプルのタイトルには,使ったビルドの日本時間日付を添えている。本稿執筆時の最新ビルドは2014年8月26日付だ(後掲図2参照⁠)⁠。TypeScriptライブラリを使うまずは,ライブラリのダウンロードと読込みから説明しよう。TypeScript」のサイトには,作例やソースファイルのリンクなどがある。Extentions」の3つのリンクからダウンロードすすればよい(図1⁠)⁠。Examples」も掲げられている。TypeScriptを試してみるには,ソースファイルの3つのリンクからダウンロードしたファイルの中の3つのライブラリ「awayjs-core.next.min.js」と「stagegl-core.next.min.js」および「stagegl-extensions.next.min.js」を使う(図2⁠)⁠。これらのJavaScript(JS)ファイルを,これから書くコードのライブラリ用に定めたフォルダ(本連載では「lib」とする)に配置する。Away3Dで使う3つのライブラリのJSファイルHTMLドキュメントには,まずscript要素にAway3Dの3つのJSファイルawayjs-core.next.min.jsとstagegl-core.next.min.jsおよびstagegl-extensions.next.min.jsを読み込む。つぎに,JavaScriptコードには初めに呼び出す関数(initialize())を設け,body要素のonload属性にその呼出しを加える。Away3Dのコードを書いていこう。onload="initialize();">Away3Dの3次元表現で用意しなければならないのは,つぎの3つだ。第1に,舞台となる3次元空間をつくる。第2に,その舞台に照明を備える。第3に,役者となる物体を舞台に登場させる。項を改めて,順に説明しよう。Away3Dで用意しなければならないもの舞台:Viewオブジェクトで3次元空間の表示領域を定める照明:光源のオブジェクトで3次元空間を照らす役者:物体のひながたからインスタンスをつくって3次元空間に加えるViewクラスで3次元空間の表示領域を定める第1につくらなければならないのは,3次元空間の表示領域を定めるViewオブジェクトだ。3次元の座標空間や,それを表示領域に映すカメラもオブジェクトの中にもつ。View()コンストラクタの引数はレンダラだ。ここでは,DefaultRendererオブジェクトを渡すことにする。away.render.DefaultRenderer())Viewオブジェクトには,プロパティで設定が加えられる(表1⁠)⁠。プロパティの数は多いものの,ほとんどはデフォルト値が定められている。今回は,ごく基本的なプロパティのみ定めることにしよう。表示される領域の幅と高さ。デフォルト値は黒(0x000000⁠)⁠。表示領域を描くために用いられるCamera3Dオブジェクト。表示領域を描くもととなる3次元空間のSceneオブジェクト。Viewオブジェクトをつくって返す関数(createView())は新たに設ける。引数には,表示領域の幅と高さ,および背景色を渡す。背景色)関数(createView())の中身は,つぎの抜書きのように定めた。初期設定の関数(initialize())から呼び出す。できあがりのJavaScriptは,後にコード1としてまとめてある。