クリックでモダルを表示する
作成したホットスポットとモダルをつなぎ合わせます。ホットスポットがクリックしてモーダルを表示させます。
1.Hotspotエンテティを選択
2. ShowModalスクリプトをHotspotに追加
3. スクリプトの属性を設定する
a. Select Entityをクリック
b. モダルを選択
4.スクリプト属性が追加される
属性が設定できると、エンテティの名前がmodalの属性にセットされます。
5. Launch画面を確認する
Launch画面を確認してみましょう。シーンを起動すると起動時のモーダルと、ProductModalの2つのモダルが表示されてしまいます。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のチェックを外します。
2. Launch画面を確認する
ボタンが押されるまでモーダルが表示されなくなりました
3. 近づいてホットスポットをクリックします。
ホットスポットをクリックします。
4. モデルが表示される
これで展示物の近くのホットスポットをクリックするとモーダルを表示させることができるようになりました。3-3ではモーダルにURL遷移をする仕組みを作っていきます。お気づきの方もいるかもしれないですが、今回のハンズオンではモーダルが一つしか無いので、3つの展示物とも同じモーダルが表示されています。 3つのモーダルを出し分ける際には、3つモーダルのエンテティを作る方法や、SCRIPTからテンプレートのインスタンスを生成などもすることもできます。
チュートリアル - PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう!
- 【1-1】 準備 - アカウントの準備
- 【2-1】プロジェクト紹介 - 展示会場をつくろう!
- 【2-2】プロジェクト紹介 - PlayCanvas Editorについて
- 【2-3】プロジェクト紹介 - スターターキットの中身について
- 【3-1-1】スクリプトについて - モデルを配置しよう
- 【3-1-2】スクリプトについて - 回転させるスクリプトを追加しよう
- 【3-2-1】3D空間のUIについて - ホットスポットを追加しよう
- 【3-2-2】3D空間のUIについて - モーダルを作ろう!
- 【3-3-1】リンクの設置 - モーダルのボタンにリンクを追加しよう
- 【3-3-2】リンクの設置 - オンラインミーティングに参加ボタンを追加しよう!
- 【3-2-3】3D空間のUIについて - ホットスポットをクリックしたらモダルを表示させよう!
- 【3-4】プロジェクトの公開 - 作ったプロジェクトを公開しよう!
コメント
0件のコメント
サインインしてコメントを残してください。