こんにちは、ナレコム前川です。
今回は、Amazon Sumerian の公式チュートリアルの
HTML Component Interaction を進めていきたいと思います。
ここで学ぶことは、
・スクリプトの追加について
・HTML について
・Pick について
・SumerianRunner について
の4つです。
それでは、進めていきましょう。
1. シーンの作成
はじめにシーンを作成し、環境を整えていきましょう。
① ダッシュボードからDefault Lighting を選択。
はじめにシーンを作成し、環境を整えていきましょう。
① ダッシュボードからDefault Lighting を選択。
② シーン名を「HTML Component Interaction」にし、作成。
③ Create Entity から HTML</> を追加。
1You have selected: Nothing
これによって、Entity を選択した際に Entity の名前を呼び出せるようになります。
2. Script の作成
ここでは、Script の作成を行っていきます。
① Create Entity から Sphere, Box, Cone, Cylinder を追加。
① Create Entity から Sphere, Box, Cone, Cylinder を追加。
※ 追加したら4つのEntityが見えるように配置を行ってください。
② HTML Entityを選択し、Add Component -> Script -> Custom Script の順で追加。
1var setup = function(args, ctx){2 // Get the span element from the HTML entity3 var spanElement = document.getElementById('selected');45 // Create a click handler function6 ctx.handleClick = function(event){7 var x = event.offsetX;8 var y = event.offsetY;9 ctx.world.sumerianRunner.pick(x, y, function(index, depth){10 if(index !== -1){11 var entity = ctx.world.entityManager.getEntityByIndex(index);12 spanElement.innerHTML = entity.name;13 } else {14 spanElement.innerHTML = 'Nothing';15 }16 });17 };1819 // Attach the click handler20 ctx.domElement.addEventListener('click', ctx.handleClick);21}2223var cleanup = function(args, ctx){24 // Remove the click handler25 ctx.domElement.removeEventListener('click', ctx.handleClick);26}
このScript は、はじめにHTML Entity から選択された要素を取得します。
その後、handleClick 関数を作成し、キャンバス内の Click イベントにその関数を追加します。
3. Script を理解する
ここでは、先程作成した Script の解説を行っていきます。
まず、ユーザーがキャンバス内のEntityをクリックすると、ctx.handleClick が呼ばれます。
この動作によって、Sumerian が先程のコードを実行していきます。
実行するにあたって、以下のようなことを行います。
① world.sumerianRunner.pick 関数を呼び、マウスの位置を渡し、callback 関数を呼び出す。
② callback 関数の中では、Entity がクリック動作でヒットしたかをエンジンが判断する。
③ Entity がヒットした場合は、innerHTML が選択された Entity 名を表示させるような処理を行う。
※ 何もヒットしなかった場合は、Nothing と表示されます。
それでは、実行して動作を確認してみてください。
今回のチュートリアルは以上です。
お疲れ様でした。
