【3-3-2】リンクの設置 -　オンラインミーティングに参加ボタンを追加しよう！

 

 

前回まででElementコンポーネントを2D Screeに配置をしてきました。 ELEMENTコンポーネントは3D空間にも配置することが出来るので、オンラインミーティング3Dのシーン上に配置をします。

1. join-meeting-buttonをブース(左)に追加する

テンプレートをブース(左)に設定します。

2. 起動してみよう

3. スクリプト属性からリンク先をオンラインミーティングのURLに変更

※ ハンズオンではここは省略します

これでオンラインの展示会場にオンラインミーティングへ参加ボタンを追加することができました。 join-meeting-buttonではSCRIPTコンポーネントにHotspot.jsとLink.jsが設定されています。 このスクリプト属性の値をオンラインのミーティングを指定することで参加者とのコミュニケーションを取ることが出来るようになりました。

ここまでで下記の機能を追加することが出来るようになりました。

• 歩き回れる展示会場を作る
• 展示物を閲覧・詳細へジャンプすることができる
• オンラインミーティングのURL

次は3Dモデルがクリックされた際にURLにリンクを移動させる方法を紹介します。

3-3-3. 3Dモデルをクリックしたら飛ぶリンクを追加しよう！ 

3D空間にリンクを追加する

前回までで２つの方法でPlayCanvasのシーン上にリンクを追加をしました。

• 2D Screenに設置したボタンをクリックでイベントの発火【3-3-1】
• シーン上にELEMENTコンポーネントをクリックでイベントの発火【3-3-2】

モデルをクリックでURLにジャンプ

 

3-3-3では、3Dモデルをクリックをするとイベントが発火されURLへ移動するスクリプトを追加します。

1. Tresure Chestをブース(右)に追加

ターゲットとなるTresure Chestを追加します。

2. TouchableSpaceをブース(右)に追加

ブース(右)に、テンプレートを追加します。

3. 起動してみよう

3Dモデルをクリックするとリンク先へ移動することができます

これでハンズオンの3-3まで作りきることができました。 3-3では下記のコンポーネントを使ってPlayCavasでリンクを設置しました。

• SCREENコンポーネント
• ELEMENTコンポーネント
• BUTTONコンポーネント

これで一通りのハンズオンのプロジェクトを作る切ることができました。 次は、PlayCanvasのプロジェクトを使って作成したプロジェクトを公開します。

※3Dスクリーンを利用したリンクの設置についてとその他の方法について

Ray Castingについて

このプロジェクトではクリックすることで指定したURLにジャンプをすることができます。 今回は、3Dモデルへの当たり判定として3D Screenを使用しました。3D Screenを使った方法はコードがシンプルに成るため使いやすいですが展示会以外に使用する場合にはカメラを使用して、レイキャスティングという方法で3Dモデルがクリックされたかの判定をする方法がもちいられます。 https://developer.playcanvas.com/en/user-manual/physics/ray-casting/

 

お疲れさまでした。ここまでで基本的なPlayCanvasを使ってオンラインの展示会場をつくることができました。

 

チュートリアル - 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】プロジェクトの公開 - 作ったプロジェクトを公開しよう！