Amazon Sumerian Tutorial 49:SumerianRunner Events

Pocket

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

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

ここで学ぶことは

・Event Listeners
・sumerianRunner Event Listeners
・Events
・Intersection marker

の4つです。

また、今回のイベントリスナーは通常の DOM イベントリスナーよりも重いようなので
必要最低限のアクションを起こすことがおすすめされています。

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

1. シーンの作成

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

③ Create Entity から Box を追加。
※ Entity は、Box に限らず好きなものを追加してください。
今回、私は Box を追加しました。

追加できたらシーンの設定は終わりです。

2. Entity に Event Listeners を追加する

ここからは、主に Script を編集する作業を行っていきたいと思います。

① Create Entity から Empty を追加。
② 追加した Entity に Script Component を追加し、Custom を選択。

③ エディタを開き、以下のコードと置き換える。

シーンを公開し、Iframe のやり方と同様に動作確認を行っていきます。
シーン上でマウスをクリックするとコンソールにメッセージと座標などの情報が表示されます。

3. ちょっとした GUI の追加

ここからは、イベントの情報を表示する HTML Entity を作成していきます。

① Create Entity から HTML</> を追加。

Move with Transform のチェックを外す。

③ HTML エディタを開いて、以下のコードに置き換える。

置き換えると、シーンの左上に intersection-info 内で定義して文字が表示されると思います。

④ Entity を選択し、Script に以下の関数を追加。

⑤ 以下のコードを Script の setup 関数内の runnerListeners と置き換える。

シーンを実行して、値がどのように変化するか確認してください。
以下のようになると思います。

4. Intersection Marker

ここからは、Sphere を使ってシンプルな Intersection Marker を追加していきたいと思います。

① Create Entity から Sphere を追加。

② Entity を選択し、Script エディタを開く。
setup 関数に以下のコードを追加。

 
④ 以下の関数を追加。

⑤ 最後に setup 関数の runnerListeners を以下に変更。

Script を保存して、シーンを実行してみてください。
以下のように動作するはずです。

5. 完成版Script

うまく動作しなかった場合には、以下のコードと置き換えるか見比べてみてください。
以下のコードは、完成したコードになっています。

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