テクスチャとカメラAway3Dはオープンソースのリアルタイム3Dエンジンだ。Flashプラットフォーム向けに開発された。TypeScript」というJavaScriptライブラリに移植されはじめている。現在アルファリリースが公開され、先月の11月5日にビルドが改められた。TypeScriptによる3次元表現の基礎をご説明したい。Away3DのJavaScriptライブラリとクラスの読込みAway3DのJavaScriptライブラリはつぎの5つを使う。これまでの2014年8月26日付ビルドでは3ライブラリだった(図001上)。新たなライブラリは、名前の頭が「awayjs-」で揃っている。JavaScript(JS)ファイルだけでなく、それぞれのmapも与えられているので、同じ場所に入れておく(図001下)。awayjs-coreawayjs-displayawayjs-rendererglawayjs-stageglawayjs-methodmaterials図001■Away3Dで用いるライブラリのファイル2014年8月26日付2014年11月5日付なお、ライブラリはGitHubの「AwayJS」からダウンロードする。Examples」)のリンクしかない(図2)。Files」の欄そして、script要素で5つのJSファイルを読込む。src="lib/awayjs-methodmaterials.min.js"></script>これまでAway3Dのクラスは「away」から始まる長い名前空間を添えて参照した。新たなライブラリでは、require()関数でクラスの参照を得る。それを変数に与えて用いるというやり方だ。変数名はクラスと同じにするとわかりやすい。TypeScriptではじめる3次元表現」第3回「ライブラリとクラスの読込みが変わった」を参照してほしい。Away3Dで用意しなければならないもの3次元表現では、3次元空間と光源、および物体の3つを用意する。Viewオブジェクトで3次元空間を定めるViewクラスのコンストラクタには、引数としてレンダラを渡す。デフォルトのレンダラはDefaultRendererクラスでつくる。Viewオブジェクトをつくる関数(createView())はつぎのように定め、初期化の関数から呼出した(行番号は後掲コード001にもとづく)。球体をプレハブのクラスからつくる基本的な形状の物体は、プレハブクラスでひながたを定め、PrefabBase.getNewObject()メソッドを呼出してつくる。プレハブクラス.getNewObject()球体をつくるのはPrimitiveSpherePrefabクラスで、コンストラクタの引数には半径を与える。球体の表面材質はTriangleMethodMaterialで定め、引数としてDefaultMaterialManager.getDefaultTextureメソッドでデフォルトのテクスチャをつくって与えた。素材は物体のMesh.materialプロパティに定める。物体は、View.sceneプロパティから得られるSceneオブジェクトに、Scene.addChild()メソッドで加える。3次元空間の表示領域を描くには、必ずView.render()メソッドを呼出さなければならない。sphere;}これで3次元空間の中に球体がつくられる(図003)。以下のコード001にJavaScriptコードをまとめた。光りあれ神と同じく「光りあれ」と光をつくる。3次元表現で使われる光源はいくつかある。太陽の光のように同じ向き(平行)に進み、距離によって強さが変わらない(図004右上)。平行光源はDirectionalLightクラスで定める。太陽光だけでは、月のように光の当たっていない部分は暗闇になってしまう。light)があることで、陰にも光が及ぶ。そこで、DirectionalLightオブジェクトをつくって返す関数(createDirectionalLight())は、環境光の強さを引数に受取り、DirectionalLightオブジェクトのLightBase.ambientプロパティに与えた。光源は物体の表面素材に与える。そこで、球体をつくる関数()の引数に光源のオブジェクトを加えた。表面素材を照らす光源は、MaterialBase.lightPickerプロパティにStaticLightPickerオブジェクトで与える。StaticLightPicker()コンストラクタに渡す引数は,光源の配列だ。light;}これで、3次元空間に置かれた球体が、平行光源で照らされる(図005)。JavaScriptコードは、コード002にまとめた。テクスチャとカメラ物体にテクスチャを貼ると、質感が出てくる。TypeScriptではじめる3次元表現」第3回「ライブラリとクラスの読込みが変わった」をご覧いただきたい。間もなく公開される第4回「床の追加とカメラのパン・チルト」で、平面の床を加えて、さらにインタラクティブにカメラの位置や角度を変える(サンプル001)。