分12前回の第8回「オブジェクトの位置と大きさをランダムにする」では,真ん中のオブジェクトの周りに,ランダムな位置と大きさで複数のオブジェクトを置いて,カメラで回り込んだ。今回は,これらのオブジェクトへのマウスインタラクションを加えよう。オブジェクトのマウスイベントをどう扱うかが課題だ。オブジェクトへのマウスクリックでURLを開くまず,立方体をクリックしたとき,そのオブジェクトに割り当てたURLを開きたい。それぞれが開くURLは,あらかじめオブジェクトに定める。扱いやすいように,URLの文字列は配列にまとめて変数(urls)に納めておくとよい。初期設定の関数(initialize())が真ん中のオブジェクトにURLをプロパティ(url)として加えたうえ,オブジェクトを複製する関数(cloneMesh())でも同じ名前のプロパティに配列エレメントのURLを与えた。urls[i];}さて,マウスによるクリックはイベント定数MouseEvent.CLICKで扱う。お約束どおり,EventDispatcher.addEventListener()メソッドでリスナー関数を加え,その中にオブジェクトがクリックされたときの処理を書けばよい。リスナー関数)オブジェクトをつくる関数(createCube())と複製する関数(cloneMesh())が定めたリスナー(onClick())は,クリックしたオブジェクトに割り当てられたURLを開く。マウスイベントの起こったオブジェクトは,リスナー関数が引数に受取ったイベントオブジェクト(eventObject)のobjectプロパティから得られる(※1⁠)⁠。そこで,オブジェクトのプロパティ(url)に定めておいたURLを,window.open()メソッドで開けばよい。window.open(mesh.url);}これで,オブジェクトをクリックすると,それぞれに定められたURLのサイトが開く(図1⁠)⁠。まとめたスクリプトは,以下のコード1のとおりだ。matrix.transformVector(vector);}※1JavaScriptでは,イベントの起こったオブジェクトの参照はイベントオブジェクトのEvent.targetプロパティで得る。試してみると,Away3DのMouseEventオブジェクトにもtargetプロパティは備わっており,objectプロパティと同じオブジェクトが参照される。Parser⁠」⁠)ではobjectプロパティを用いているため,これにならった。今後のバージョンで変わるかもしれない。