Amazon Sumerian Tutorial 47:DOM Event Listeners

こんにちは、ナレコム前川です。

今回は、Amazon Sumerian の公式チュートリアルの
DOM Event Listeners を進めていきたいと思います。

今回は、ユーザーのクリックやドラッグ、タッチに応答するインタラクティブなシーンを作成するのに役立ちます。

JavaScript のイベントリスナーを使用することによってユーザーの入力を操作することができます。
ここでは、ユーザーがマウスを使用してエンティティを回転させるためのスクリプトを作成します。

それでは、進めていきましょう。

1. シーンの作成

① ダッシュボードからDefault Lightingを選択。
② シーン名を「DOM Event Listeners」に設定し、作成。

③ Create Entity から Box を追加。
※ 3D の別のエンティティ(例えば、球とか)でも構いません。

④ Box の色を変更。(Hex の 232F3E に設定しました。)

⑤ Box に Script Component を追加し、Custom を追加。
⑥ スクリプト名を「Spinner」に設定。

⑦ Create Entity から Fixed Cam を追加。

⑧ Fixed Cam を選択し、Main CameraFollow Editor Camera にチェックを入れる。

これで、シーンの設定は終わりです。

2. JavaScript Event Listeners を理解する

イベントハンドラに要素(例えば、div とか)や document, window をアタッチすることができます。
以下のコードは、mousedown イベントリスナーを window オブジェクトに追加する方法を示しています。

evt は、イベントが発生した座標などのプロパティを保持します。
それでは、evt についてコンソールを開いて確認してみてください。
マウスをクリックするとマウスの位置が表示されます。

3. Event Listeners の追加と削除

イベントリスナーを使用する上で気にかけることがいくつかあります。

まず、setup 関数については、イベントリスナーを追加するのに最適な関数です。
しかし、追加したリスナーを cleanup 関数で削除する必要があります。

削除するにあたって、格納されたリスナーのハンドルが必要となります。

また、イベントリスナーのカスタマイズや作業を容易にするために、優れたスクリプト構造を持つことが大切です。

それでは、実際に編集して実行していきましょう。

上記のプログラムをスクリプトに追加・保存し、シーンを実行してみてください。
コンソールを確認すると、以下のように表示されます。

3. 回転に速度をつける

ここでは、mousedown, mouseup, mousemove のイベントを組み合わせたスクリプトを作成していきたいと思います。

① 以下のスクリプトを setup 関数の一番上に書く。

② 2 つのパラメータを設定するため、以下のコードを追加する。

sensitivity は、マウスのドラッグ距離に関連して回転速度を制御します。
damping は、Box が永遠に回転しないようにするものです。

③ 実際の動作を制御する関数を追加する。

setup 関数のイベントリスナーを以下のようにする。

これで、スクリプトの作成は完了です。
実行して確認してみてください。

もしうまくいかない場合は、以下のコードと置き換えてください。
以下は、完成版のスクリプトです。

今回のチュートリアルは以上です。
お疲れ様でした。

この記事を書いた人

aws-recipe-user