このセクションの記事

もっと見る

【3-2-3】3D空間のUIについて - ホットスポットをクリックしたらモダルを表示させよう！

Avatar
羽賀 流登
  • 更新
フォローする

 

クリックでモダルを表示する

作成したホットスポットとモダルをつなぎ合わせます。ホットスポットがクリックしてモーダルを表示させます。

1.png

 

1.Hotspotエンテティを選択

2.png

2. ShowModalスクリプトをHotspotに追加

3.png

3. スクリプトの属性を設定する

a. Select Entityをクリック

4.png

b. モダルを選択

5.png

4.スクリプト属性が追加される

6.png

属性が設定できると、エンテティの名前がmodalの属性にセットされます。

5. Launch画面を確認する

7.png

Launch画面を確認してみましょう。シーンを起動すると起動時のモーダルと、ProductModalの２つのモダルが表示されてしまいます。ProductModalはホットスポットがクリックされるまで表示する必要はないので、起動時には非表示にします。

スクリプトについての解説

クリックでモダルが表示されるようになりました。ホットスポットに追加したSCRIPTはこちらになります。3-2-2で追加されていた、hide-modal.jsと反対の動きをしています。

show-modal.js

/*jshint esversion: 6, asi: true, laxbreak: true*/
class ShowModal extends pc.ScriptType {
  initialize () {
    this.entity.element.on(pc.EVENT_MOUSEDOWN, this.show, this) // マウスが押されたらthis.show関数を実行
    this.entity.element.on(pc.EVENT_TOUCHSTART, this.show, this) // タッチされたらthis.show関数を実行
  }
  show () {
    this.modal.enabled = true // this.modalを表示している
  }
}
pc.registerScript(ShowModal)
ShowModal.attributes.add('modal', { type: 'entity' }) // スクリプト属性を使用してエディタからエンテティを設定、エディタで設定しなかった場合にはundefinedとなる
  • this.entity.element.on
  • pc.EVENT_MOUSEDOWN
  • pc.EVENT_TOUCHSTART
  • show()

this.entity.element.on

pc.EVENT_MOUSEDOWN, pc.EVENT_TOUCHSTARTはそれぞれボタンが押されたときに発火されるイベントのイベントリスナーになります。this.entity.element.onで、エンテティが押されときの処理を記述しています。 show() スクリプト属性で追加されたモデルの表示(enabled)を表示に変更します。

イベント

PlayCanvasにはイベントを管理するためのメソッドが複数用意されています。これらを利用すると、イベント駆動でスクリプトを書くことができます。

 

モダルを起動時に表示させなくする

1. エンテティを選択し、モダルのenabledのチェックを外します。

8.png

2. Launch画面を確認する

9.png

ボタンが押されるまでモーダルが表示されなくなりました

3. 近づいてホットスポットをクリックします。

10.png

ホットスポットをクリックします。

4. モデルが表示される

11.png

これで展示物の近くのホットスポットをクリックするとモーダルを表示させることができるようになりました。3-3ではモーダルにURL遷移をする仕組みを作っていきます。お気づきの方もいるかもしれないですが、今回のハンズオンではモーダルが一つしか無いので、3つの展示物とも同じモーダルが表示されています。 3つのモーダルを出し分ける際には、3つモーダルのエンテティを作る方法や、SCRIPTからテンプレートのインスタンスを生成などもすることもできます。

 

チュートリアル - PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。