【2-1】プロジェクト紹介 - 展示会場をつくろう！

オンライン展示会の完成図

今回のオンライン展示会は以下の機能を持っているものを作ります。 3Dモデルやスクリプト、アセットについてはあらかじめ用意されているものを使用します。

1. キャラクター操作
2. モデルの配置
3. ホットスポット機能・モーダルの表示
4. URLへジャンプ機能
5. モデルをクリックでページ遷移

プロジェクトの起動画面

デプロイされたプロジェクト

https://playcanv.as/p/eMWOGIkt/

このハンズオンのゴールについて

• PlayCanvasの基本的な操作方法を行えるようになる
• PlayCanvas Editorの機能を使用してプロジェクトの公開

1.フォーク(プロジェクトの複製)

 

（旧）Model Component

https://playcanvas.com/project/731591/

（新）Render Component + Anim State Graph対応版

https://playcanvas.com/project/851773

 

※ PlayCanvasのアップデートにより内容を一部修正いたしました。

現在はRender Componentを使用したプロジェクトが新しい書き方となります。

変更点は、キャラクターのアニメーションについての制御方法が変わっております。

 

上記リンクからプロジェクトにアクセスして「Forkボタン」をクリックします。

 

2. プロジェクトのフォーク

プロジェクトの名前とを入力して(好きな名前で大丈夫です)FORKをしてください。

 

2. プロジェクトからエディタを起動

プロジェクトページの中にある、EditorボタンをクリックしPlayCanvas Editorを起動します。

 

3. シーンの選択

シーンの選択画面がでてきますので、Mainというシーンを選択してください。

 

4. シーンが開かれます

これでシーンが開かれました、次には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】プロジェクトの公開 - 作ったプロジェクトを公開しよう！