TypeScriptサイトから頂戴する。スクリプトの組立ては,わかりやすさを考えて書き改める。次回を含めた都合2回で仕上げたい。スカイボックスの仕組み今回つくるのは,3次元空間を取り巻く背景だ。スカイボックスという仕組みで,3次元空間の物体やカメラを,6つのテクスチャの面で囲んでしまう(図1⁠)⁠。スカイボックスの中をカメラで見回すと,もちろん角や縁が見えることなく,テクスチャはパノラマのように滑らかにつながる。下:y軸負スカイボックスの前に,まずは3次元空間のViewオブジェクトを定めなければならない(コード1⁠)⁠。TypeScriptで基本的な3次元の形状をつくる」「⁠Viewクラスで3次元空間の表示領域を定める」参照⁠)⁠。後でアニメーションさせるつもりなので,RequestAnimationFrameクラスでコールバック(render())を定めて描画(View.render()メソッド)している。3次元空間には何もない。Viewオブジェクトの背景色(View.backgroundColorプロパティ)に黄色を与えたので,空間は一面黄色く染まる(図2⁠)⁠。これで,3次元空間はつくられた(※1⁠)⁠。view.render();}※1)黄色はViewオブジェクトがつくられたことを確かめるためにつけた。スカイボックスを定めれば,テクスチャで背景色は見えなくなる。スカイボックスの素材を読込むスカイボックスは,前述のとおり6つのテクスチャからつくられる。いって,北欧発祥の大手家具販売店で買ったボックスのように,自分の手で組立てるには及ばない。どのテクスチャをどこに使うのかという指示さえ与えれば,Away3Dのライブラリがスカイボックスをつくってくれる。指示はつぎのようなJSONファイルに定める。テクスチャの位置を"id",ファイルを"image"というプロパティに与えたオブジェクト6面分を,"data"というプロパティ名の配列に納める。テクスチャの位置を示す"id"の名前は,xyz軸と正負の方向の組合せから成立つ(図3⁠)⁠。mapping」で使われている以下のものを選んだ。これらのファイルは,assetsフォルダの中にさらにskyboxというフォルダをつくってまとめた(図4)。6つのテクスチャとJSONファイルをフォルダにまとめたJSONファイルは拡張子が「cube」で,テクスチャをつぎのように定めている。]}JSONファイルは,AssetLibraryクラスを用いて読込む。読込み方は,以下のように基本的にテクスチャファイルのときと同じだ(第4回「床の追加とカメラのパン・チルト」「テクスチャが貼られた床を加える」参照)。スカイボックスのファイルはすべてひとつのフォルダにまとめた。そのフォルダをURLの起点にしたい。このとき使うのがAssetLoaderContextクラスだ。AssetLoaderContext.dependencyBaseUrlプロパティにそのURLを与えればよい。AssetLoaderContextオブジェクト(assetLoaderContext)は,AssetLibrary.load()メソッドの第2引数に渡す。LoaderEvent.RESOURCE_COMPLETEイベントのリスナー関数(onResourceComplete())は,JASONファイルの読込みを確かめたら,LoaderEvent.assetsプロパティの配列(assets)から素材(asset)を取出して,別に定めるスカイボックスをつくる関数(setupSkybox())に引数として渡した。