分123今回からのお題は,3次元でインターフェイス風の動きをつくる。サンプル1は,マウスポインタの位置に応じて空間に浮かぶ箱が回り,それぞれの箱はロールオーバーとロールアウト,およびクリックに反応する。今回は箱の配置と回転までで,これから都合4回で仕上げるつもりだ。interactions3次元空間の真ん中に箱を置いて回すまずは,3次元空間の真ん中に箱を置いて回す。JavaScriptコードの組立ては第3回コード1「球体にテクスチャを貼って3次元空間で回す」と同じで,球体が立方体に変わるだけだ。立方体はPrimitiveCubePrefabクラスでひながたをつくる(第1回の「球体以外の基本的なかたちをつくる」の項を参照⁠)⁠。PrimitiveCubePrefab()コンストラクタの基本となる引数は幅と高さおよび奥行きの3つで,後はデフォルト値が与えられている(※1⁠)⁠。6面テクスチャ)だが,今回は7つ目の引数を使いたい。これはテクスチャが6面の展開図で用意されているかどうかをブール値で示す。デフォルト値はtrueで展開図を使う。falseを渡すと,ひとつのテクスチャを1面分として,それを6面それぞれに貼ることになる。お題で使ったのは,公式サイトのawayjs-examplesからダウンロードできるtrinket_diffuse.jpgだ(図1⁠)⁠。引数の水平・垂直・奥行き分割数のデフォルト値は,それぞれ1が与えられている。立方体の各面に貼るテクスチャ前述のとおり,第3回コード1と同じ組立てで,3次元空間に立方体を置いて回したのが後に掲げるコード1だ。おもな違いをつぎに抜出した。ひながたはPrimitiveCubePrefabクラスで定め,立方体をつくる関数(createCube())の引数はPrimitiveCubePrefab()コンストラクタに合わせた。テクスチャは6面それぞれに用いるよう,7番目の引数がfalseになっている。後は,変数や関数の名前を立方体(cube)に合わせて変えたくらいだ。cube;}これで3次元空間の真ん中にテクスチャの貼られた立方体が置かれ,水平および垂直軸で回る(図2⁠)⁠。箱を回したのは,とりあえずかたちやテクスチャを確かめるためだ。お題では箱は動かさずに,カメラのほうを回り込ませる。view.render();}※1厳密には,幅と高さおよび奥行きの引数も,デフォルト値がいずれも100に定められている。これらの値は与えるのが通常だろう。