TypeScriptで基本的な3次元の形状をつくる」は,基本的なかたちとして球体をつくって3次元空間に置いた。表面の素材(マテリアル)はデフォルトのままで動きもしないため,3次元表現としては冴えない(再掲第1回サンプル2⁠)⁠。そこで,今回は素材にテクスチャを貼って,アニメーションで回してみよう。space(再掲)3次元空間でボールを回すまずは,球体に貼るテクスチャのビットマップが要る。Examples」にある素材を使わせてもらおう。beachball_diffuse.jpgがビーチボールのようなテクスチャだ(図1⁠)⁠。いっても,ご覧のとおり球体の展開図などつくらなくてよい。矩形のビットマップをAway3Dが伸び縮みさせて球体に貼りつけてくれる。JPEG形式で大きさは512×256ピクセルだ。3次元のCGではテクスチャの1辺を2の累乗にするのがお約束になっている。ビーチボールのテクスチャ外部ファイルを読込んで使うときには,ロード待ちしなければならない。そこで,LoaderEvent.RESOURCE_COMPLETEイベントに静的メソッドAssetLibrary.addEventListener()でリスナー関数を加えて,読込み終えたときの処理を定める。ロードを始めるのが静的メソッドAssetLibrary.load()だ。引数はURLRequestオブジェクトで,コンストラクタには読込むURLを文字列で渡す。away.net.URLRequest(URL))それでは,第1回コード1「3次元空間に球体をひとつ置く」に手を加えていこう。素材用のフォルダ(assets)を設けてテクスチャを納め,URLは変数(imageDiffuse)に定めた。初期設定の関数(initialize())でつくる平行光源(directionalLight)の色は,自然な白に戻す。LoaderEvent.RESOURCE_COMPLETEイベントのリスナー(onResourceComplete())の追加とテクスチャの読込みを加えた。AssetLibraryクラスの完全修飾名(名前空間)が長いので,予めクラスと同名のローカル変数にとっている。素材にはテクスチャを読込んで与えるので,球体をつくる関数(createSphere())でデフォルトのテクスチャは定めなくてよい。第1回コード1を,つぎのように書替える。material;}つぎに,LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())だ。引数に受取るイベントオブジェクトのLoaderEvent.assetsプロパティから素材の配列が得られる。今回読込んでいるテクスチャはひとつしかないので,インデックス0の素材をMaterialBase.textureプロパティに与えれば表面素材が定まる。view.render();}ところが,このリスナー関数ではテクスチャが貼られなかったりする(図2⁠)⁠。テクスチャがキャッシュされていない場合,LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())が呼び出されてLoaderEvent.assetsプロパティの参照がとれても,その配列は空のときがある(※1⁠)⁠。たちの悪いことに,その後はもうイベントが起こらない。したがって,配列が空のときは改めてイベントリスナーを定め,テクスチャも読込み直さなければならない。その修正を加えたのが,以下の関数だ。}}LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())が呼び出されたら,LoaderEvent.assetsプロパティの配列の長さを調べる。エレメントの素材があることを確かめて,MaterialBase.textureプロパティに与える。配列が空のときはイベントリスナーは定め直して,改めてAssetLibrary.load()メソッドで素材ファイルを読み込んだ。そのURLはLoaderEvent.urlプロパティで得られる。これでようやく球体にビーチボールのテクスチャが貼られた(図3⁠)⁠。ここまでをコード1として以下にまとめておこう。LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルが読込めない」を参照してほしい。loaded⁠」⁠)⁠。