TypeScriptAway3Dはオープンソースのリアルタイム3Dエンジンです。Flashプラットフォーム向けに開発されました。TypeScript」としてJavaScriptライブラリへの移植が進んでおり、現在アルファリリースが公開されています。TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回してみましょう。本稿は2013年12月3日のビルドにもとづくきます。立方体を回してみる」をお読みください。TypeScript」サイトには、作例やソースファイルのリンクなどが掲げられています。TypeScript」のリンクからダウンロードできます(後掲図002上)。ところが、本稿執筆時に筆者が試した2014年1月30日付のJavaScript(JS)ファイル「Away3D.next.min.js」(図001)は、script要素に読込んでも初期化できずエラーが起こってしまいました(「Away3D.next.js」でも同じ)。Examples」のコードに読込まれているJSファイルを使います(図002上)。ダウンロードしたソースの「libs」フォルダにある「Away3D.next.min.js」(図002下)を、これから書くコードのライブラリ用に定めたフォルダ(本稿では「lib」)に配置します。このJSファイルのタイムスタンプは、2013年12月3日です。図002■作例のソースへのリンクと用いられているJSファイルHTMLドキュメントには、まずscript要素にAway3D.next.min.jsを読込みます。つぎに、JavaScriptコードには初めに呼出す関数(initialize())を設け、body要素のonload属性にその呼出しを加えます。これで準備が整いました。Away3Dのコードを書いていきましょう。onload="initialize();">Away3Dの3次元表現で用意しなければならないのは、つぎの3つです。第1に、舞台となる3次元空間をつくります。第2に、その舞台に照明を備えます。第3に、役者となる物体を舞台に登場させます。項を改めて、順にご説明します。View3Dクラスで3次元空間の表示領域を定める第1につくらなければならないのは、3次元空間の表示領域を定めるView3Dオブジェクトです。3次元の座標空間や、それを表示領域に映すカメラもオブジェクトの中にもちます。View3D()コンストラクタは、引数なしに呼出して構いません。away.containers.View3D()View3Dオブジェクトには、プロパティで設定が加えられます(表001)。プロパティの数は多いものの、多くはデフォルト値が定められています。今回は、ごく基本的なプロパティのみ定めることにします。表示される領域の幅と高さ。デフォルト値は640×480ピクセル。デフォルト値は黒(0x000000)。用いられるアンチエイリアスの大きさ。表示領域を描くために用いられるCamera3Dオブジェクト。表示領域を描くもととなる3次元空間のScene3Dオブジェクト。View3Dオブジェクトをつくって返す関数(createView())は新たに設けます。引数には、表示領域の幅と高さ、背景色、それにアンチエイリアスの大きさを渡します。アンチエイリアス)できあがりのJavaScriptは、後にまとめてコード001として掲げます。関数(createView())は、つぎの抜書きのように定めました(第12〜19行目)。初期設定の関数(initialize())から呼出します(第5行目)。行番号は後掲コード001にもとづきます。DirectionalLightクラスで平行光源を定める第2に、光源を定めます。3次元空間をつくっても、光がなければ見えません。神と同じく「光りあれ」と、光をつくらなければならないのです。3次元表現で使われる光源はいくつかあります。太陽の光のように同じ向き(平行)に進み、距離によって強さが変わりません(図003右上)。平行光源は、DirectionalLight()コンストラクタで定めます。引数はなくて構いません。この光で、この後つくる物体の表面を照らします。away.lights.DirectionalLight()もっとも、太陽光だけでは、月のように光の当たっていない部分は暗闇になってしまいます。light)があることで、陰も見えるのです。DirectionalLightオブジェクトのambientプロパティに強さの数値を与えると、環境光が加わります。そこで、DirectionalLightオブジェクトをつくって返す関数(createDirectionalLight())は、環境光の強さを引数に与えてつぎのように定めます。Meshクラスで立方体をつくるようやく、舞台と照明が整いました。第3の、役者となる物体のMeshオブジェクトを登場させます。Mesh()コンストラクタには、幾何情報と表面素材のオブジェクトを引数に渡します。素材)立方体の幾何情報は、CubeGeometryオブジェクトで定めます。CubeGeometryI()コンストラクタには、引数として幅と高さおよび奥行きの数値を与えます。奥行き)素材としては、表面をひとつの色で塗ることにします。定めるのはColorMaterialクラスで、コンストラクタにはカラー値の整数を渡します。away.materials.ColorMaterial(カラー値)物体の表面を照らす光はStaticLightPickerオブジェクトで定め、素材のオブジェクトのlightPickerプロパティに加えます。StaticLightPicker()コンストラクタには、光源のオブジェクトを配列に納めて渡します。away.materials.StaticLightPicker(光源の配列)これらのオブジェクトから立方体のMeshオブジェクトをつくって返す関数(createCube())はつぎのように定めます。引数には、幅と高さと奥行きに加えて、素材のカラー値および光源のオブジェクトを渡します。光源)関数(createCube())は、CubeGeometryとColorMaterialオブジェクトからMeshインスタンスをつくり、光源のオブジェクトを設定して返します(第20〜26行目)。この関数は、初期設定の関数(initialize())から呼出して、できあがったMeshインスタンスを3次元空間に加えます。3次元空間のScene3DオブジェクトはView3D.sceneプロパティで参照し(前掲表001)、Scene3D.addChild()メソッドの引数としてインスタンスを渡します(第7行目)。3次元空間に手が加わったら、表示領域に描き直すため、必ずView3D.render()を呼出します(第10行目)。これで、画面に立方体が表れます。mesh;}もっとも、このまま描かれる立方体は真正面向きですので、前面の正方形しか見えません。そこで、x軸とy軸周りに少し角度を傾けます(図004)。Meshオブジェクトのプロパティとして、rotationXとrotationYにそれぞれの角度を与えました(第8〜9行目)。これらをまとめたのが、つぎのコード001です。directionalLight;}前掲コード001の動きが確かめられるように、jsdo.itにサンプルコードを掲げました(サンプル001)。立方体を水平および垂直に回すそれでは仕上げとして、3次元空間の立方体を上下左右に回してみましょう。アニメーションは、RequestAnimationFrameクラスで扱います。一定の時間間隔で行うアニメーションの処理を関数で定め、コンストラクタの引数として渡します。コールバック関数が呼出される頻度は、1秒間に約60回です[*1]。コールバックの呼出しは、RequestAnimationFrame.start()メソッドにより始まります。away.utils.RequestAnimationFrame(コールバック)RequestAnimationFrameオブジェクト.start()上述のふたつのメソッドは、初期設定の関数から呼出します(第8〜9行目)。以下の抜書きの行番号は、後に全体を掲げるコード002にもとづきます。RequestAnimationFrame()コンストラクタに渡したコールバック関数(rotate())は、x軸とy軸周りの角度を1度ずつ加えています(第32〜35行目)[*2]。角度を360度の剰余(%)としているのは、値が果てしなく大きくなることを避けるためです。rotationY;view.render()};つぎのコード002にJavaScript全体をまとめました。これで、3次元空間の立方体は上下左右に回ります。jsdo.itにも同じサンプルコードを掲げました(サンプル002)。RequestAnimationFrameオブジェクトは、内部的にwindow.requestAnimationFrame()メソッドを使っています。window.requestAnimationFrame()は、ブラウザが画面を描画し直そうとするとき、コールバック関数を呼出すメソッドです。再描画は画面のリフレッシュレートにもとづきますので、呼出しの頻度は一般的な60Hzでは1秒間に60回ほどです。x軸とy軸だけで、z軸は使わなくても、上下左右の回転はできます。z軸による回転は、xy平面で回すことを意味します。同じように、x軸ならyz平面上の回転になります。yz平面はy軸で90度回せば、xy平面に重なります。x軸とy軸で、z軸と同じ回転が表せるのです。LABで「簡単なJSで始めるWebGL対応Away3Dチュートリアル」という連載が始まっています。本稿執筆時では、つぎの3回分が公開されていますので、読まれるとよいでしょう。2014年5月13日付ビルドにもとづく解説へのリンクを追加。