チュートリアル - 3D空間を使った簡単webサイト 1/5

※このチュートリアルはPlayCanvas運営事務局で使用しているハンズオンの資料です。

PlayCanvasでWebサイトを作る

#ゲームエンジンでwebサイトを作る？

PlayCanvasはWebGL/HTML5ゲームエンジンであり、ゲームだけでなくwebへの展開もできます。
そこでPlayCanvasを使ってどんなwebサイトが作れるのか、実際に作っていきたいと思います。

このチュートリアルでは、PlayCanvasを使って3D空間のコンテンツを作成し、その上にhtmlの要素を配置して、LPページ（ランディングページ）やキャンペーンサイトのようなwebサイトを作成していきたいと思います。

できるページは以下のようなページができます。
https://playcanv.as/p/uQN2hNcm/

3Dオブジェクトをクリックするとそれに応じたhtmlが表示されるサイト。
ドラッグするとカメラの位置も変わり、3Dオブジェクトを好きな位置に配置して探す、といったこともできます。

今回は上記のものを作成するべく、チュートリアルを始めましょう。

---

#Projectをforkする
チュートリアル用に準備したProjectがあるので、こちらをforkしてチュートリアルを始めます。

以下のProjectからforkします。
https://playcanvas.com/project/623766/

![スクリーンショット 2019-06-17 17.50.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/3e3f6642-28a0-81ae-3844-6cfebdcc5244.png)

forkしたProjectのページに飛ぶので、forkしたプロジェクトのEDITORボタンからエディット画面に飛びます。

![スクリーンショット 2019-06-17 18.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/34f2e693-723a-ef1f-5265-9e37acca9675.png)

 

#エディット画面のGUIの説明
まずSCENESの画面からeditするsceneを選びます。
Untitledしかないのでこちらを選択。（新規にプロジェクトを作る際もUntitledのsceneがあります）

![スクリーンショット 2019-06-17 18.03.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/157a2ca3-f3c0-5025-8038-fd8be20f141d.png)


Untitledをクリックすると以下の画面になります。

![スクリーンショット 2019-06-17 18.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/ca6e3d68-76a4-1dea-f4da-a200cdc16fea.png)


上の画像を基に、GUIを簡単に説明していきます。

- **メニュー(MENU)**   
Photoshopなどでいうツールバーとメニューバーが合わさっている感じ。   
プロジェクトの設定やシーンの設定などもここで操作できます。   
- **ヒエラルキー(HIERARCHY)**   
シーン内に存在するオブジェクトの一覧が表示されます。   
このシーンではどんなentityが使われているのかなどここで管理。   
まとめてグループ化や名前の変更などもできる。   
- **シーン(SCENE)**   
3D空間が表示され、自由な位置・角度から眺めることができます。   
3DコンテンツやカメラのPositionやRotateなどを弄ることができます。   
- **アセット(ASSETS)**   
プロジェクトhtmlやcss、imgといったファイルや3Dモデルのデータなどもここで表示され、ここに入れて使われるデータたちは合わせてアセットと呼ばれています。   
ディレクトリで分けたり名前を変更することもできます。各ファイルはアップロード時にIDが付与され管理されるため、同じ名前のファイル名をアップロードしても上書きアップロードにはならないことがあるので注意。   
- **インスペクター(INSPECTOR)**   
ヒエラルキーやシーンで選択中のオブジェクトの設定を編集できます。   
3Dモデルのメッシュや衝突判定、物理制御に関するパラメータもここで定義することが可能。   
 

##コードエディター
基本的なGUIはこの5つで、他にコードエディターがあります。   
コードエディターはメニューの下の方にあります。

![スクリーンショット 2019-06-17 18.34.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/00876f67-0fa9-ab7f-da6f-a1f89c1b58c1.png)

<img width="1680" alt="スクリーンショット 2019-06-17 18.33.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/ba243f30-8047-9cc8-a227-cc5ade1596f8.png">


コードエディターは普段使用されているであろうエディターと基本同じです。   
JavaScriptのsnippetやコードのhighlightなども基本付いています。

基本ここでコードを書いて反映していきます。

 

#Lauch実行
右上の再生ボタン的な矢印のボタンをクリックすると、Launch実行されます。

![スクリーンショット 2019-06-19 13.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/1bf807ec-2911-2d68-3b6b-0b032d03831e.png)


Sceneの現状をLaunch実行してくれるため、開発しながら確認ができます。   
Launch画面を開いたままにしておくと、Editor画面とライブリンクが持続した状態になり、Editor画面でPositionmの数値などを変更するとリアルタイムでLaunch画面でもプレビューされます。

![スクリーンショット 2019-06-19 13.41.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109168/2c84289c-f6c2-8cd4-30cc-38aee071285a.png)

 

プロジェクトを確認できたところで、次はカメラ移動の処理をつけていきます。



[次回](https://qiita.com/sutobu000/items/7905429e0bf4222e7c80)