ゲームエンジンで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/

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

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

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

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

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

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

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

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

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

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

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