Amazon Sumerian Tutorial 46:Iframe Communication

Pocket

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

Sumerian のチュートリアルにSumerian Beginner Course というものが新しく追加されていました!

まだ確認していない方は確認してみてください。

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

私達は、Iframe を使用することによって Sumerian で作成したシーンを Web ページに簡単に埋め込むことができます。
このときに、Iframe の外部でマウスの動きを把握することができるようになっています。

今回は、このマウスの動きを把握できるようにする方法について説明していきます。

ここで大まかに学ぶことは、

・スクリプトについて
・Iframe について
・postMessage について
・Mesh Color の変更について

の4つです。

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

1. シーンの作成

はじめにシーンを作成し、環境を整えていきましょう。

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

③ Create Entity から Box を追加。
④ 追加した Box に Script コンポーネントを追加。
⑤ + ボタン -> Custom を選択。

2. マウス動作の把握方法

マウスの動作を把握する方法についていくつか紹介していきます。

① オブジェクト上にマウス動作についてのスクリプトを入れ込む

先程追加した Box を選択し、Script コンポーネントからエディタを開いてください。
開いたら、以下のコードを書き込みます。

書き込んだら保存して、エディタを閉じます。
閉じたらシーンを公開してください。

上記のコードをブラウザの Web ページに埋め込みます。
埋め込んだあと、JavaScriptコンソールを開くと、マウスが Iframe 内にある時だけマウスの位置が記録されます。

Google Chrome で確認したい場合は、シーンを埋め込んだ Web ページを開き、
右クリック -> 検証 をクリックしたあと、Console を開くと確認することができます。

② window.parent でマウス位置を把握する

次は、先程のコードを以下のコードと書き換えてください。

書き換えたら保存し、公開し直します。

ここで、すぐに確認したいところですが、以下のようなエラーが発生します。

この場合は、シーンを Web ページとしてダウンロードし、
メインの Web ページと同じドメインに置くことで解決できるそうです。

③ postMessageの使用

公開したシーンを独自のサーバーに置くことなく、Iframe 内に含まれるようにしていきましょう。

HTMLの埋め込みコードを次のように変更します。
Web ページに以下のコードを書き込んでください。

保存して再度公開します。
次に、Box のスクリプトを開いて以下のコードに置き換えます。

スクリプトを保存して再公開を行います。

この設定によってiframe と iframe の外側の両方からログメッセージが取得できるようになりました。

マウス位置に応じてメッシュの色を変更する

マウスの位置でメッシュの色を変更したい場合には、以下のようなコードに書き換える必要があります。

以下のスクリプトは、マウスの位置に応じて、キューブの拡散色を設定したい時に使えます。
スクリプト内のコードを書き換えてください。

それでは、最後に公開し直して下さい。
シーンが正常に実行されると以下のようになります。

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