※このチュートリアルはPlayCanvas運営事務局で使用しているハンズオンの資料です。
PlayCanvasでWebサイトを作る
このチュートリアルでは、自作した3DモデルなどをWebから簡単に閲覧できるようにモデルビュワーを実装していきます。
今回はVue.jsというJavaScriptsのフレームワークを使います。
Vue.jsについて深堀しないため、精通していない方でも簡単に作ることができます。
できるページは以下のようなページができます。
https://playcanv.as/p/xIj6iJ4S/
3Dモデルビュワーということで、今回は3Dモデルを回転させたりズームしたりできます。
また、3Dモデルはメニューからクリックし変更することも可能で、各モデルごとに詳細を載せることも可能です。
今回は上記のものを作成するべく、チュートリアルを始めましょう。
Projectを新しく作ります
今までのハンズオンでは事前に用意したプロジェクトをForkして始めていましたが、今回は新規Project作成します。
新規プロジェクトから以下の「Model Viewer Starter Kit」を選択します。
任意のプロジェクト名と詳細を記載してCREATEをクリックします。
EDITORをクリックして、プロジェクトを編集します。
エディット画面のGUIの説明
まずSCENESの画面からeditするsceneを選びます。
Mainを選択。
Untitledをクリックすると以下の画面になります。
上の画像を基に、GUIを簡単に説明していきます。
メニュー(MENU)
Photoshopなどでいうツールバーとメニューバーが合わさっている感じ。
プロジェクトの設定やシーンの設定などもここで操作できます。ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。
このシーンではどんなentityが使われているのかなどここで管理。
まとめてグループ化や名前の変更などもできる。シーン(SCENE)
3D空間が表示され、自由な位置・角度から眺めることができます。
3DコンテンツやカメラのPositionやRotateなどを弄ることができます。アセット(ASSETS)
プロジェクトhtmlやcss、imgといったファイルや3Dモデルのデータなどもここで表示され、ここに入れて使われるデータたちは合わせてアセットと呼ばれています。
ディレクトリで分けたり名前を変更することもできます。各ファイルはアップロード時にIDが付与され管理されるため、同じ名前のファイル名をアップロードしても上書きアップロードにはならないことがあるので注意。インスペクター(INSPECTOR)
ヒエラルキーやシーンで選択中のオブジェクトの設定を編集できます。
3Dモデルのメッシュや衝突判定、物理制御に関するパラメータもここで定義することが可能。
コードエディター
基本的なGUIはこの5つで、他にコードエディターがあります。
コードエディターはメニューの下の方にあります。
コードエディターは普段使用されているであろうエディターと基本同じです。
JavaScriptのsnippetやコードのhighlightなども基本付いています。
基本ここでコードを書いて反映していきます。
Lauch実行
右上の再生ボタン的な矢印のボタンをクリックすると、Launch実行されます。
Sceneの現状をLaunch実行してくれるため、開発しながら確認ができます。
Launch画面を開いたままにしておくと、Editor画面とライブリンクが持続した状態になり、Editor画面でScaleの数値などを変更するとリアルタイムでLaunch画面でもプレビューされます。
新規プロジェクトの中身
新規から作ったプロジェクトなのにすでにモデルビュワーとして完成されています。
Assetsを確認するとModelデータやScriptsなどが入っています。
cube
CubeにはFBXという3Dモデルデータやマテリアル、テクスチャがあります。
PlayCanvasは3DモデルデータをインポートするとJSONデータに変換してくれます。
cubemap
名前の通りCubeMapが入っており、メニュー下部のSETTINGS → RENDERINGとクリックしインスペクターを見るとSKyboxを指定する項目があります。
ここでCubeMapを設定することができます。
MipMapのLevelを設定できたり、Transparent Canvasを設定すれば背景透過Canvasも作ることができます。
scripts
マウスの操作などはAssetsのscripts内にある以下のjsが対応しています。
- orbit-camera.js
- mouse-input.js
- touch-input.js
- keyboard-input.js
orbit-camera.js
オービットカメラを基盤ともなるscriptsです。
orbitとは軌道という意味で、ここでは特定のEntityを回転軸としてカメラが軌道を移動します。
中のコードを見るとわかりますが、distanceの最大最小値やpitchAngleの最大最小値を設定したり、inertiaFactorという慣性係数を指定したりと色々あります。
細かい調整などをしたい時にはこの中を読んで調整するのが良いでしょう
mouse-input.js, touch-input.js, keyboard-input.js
動かすためのmouseやtouchのinput情報をorbit-camera.jsに受け渡すscriptsです。
こちらも中身を見るとSensitivityなどを設定することができます。
mouseやtouchのイベントの取り扱いもこれを見ればわかってくると思いますので、この辺りのイベントを使いたい時には参考にするといいかもしれません。
これらのScriptsをCamera Entityに追加することで3Dモデルビュワーを実装しています。
新規プロジェクトからこれだけのものが用意されているので、コードを書く必要がほぼないです。
このまま使用しても良いですが、今回はこれを使ったWebページを作っていきます。
今回は下記のことを主にやっていきます。
- DOMを乗せる
- Vue.jsで3Dモデルを切り替える
- 切り替え時の動きを作る
- 3Dモデルごとに詳細ページを作る
- 詳細ページへの切り替えなどの処理を作る
上から順に進めていきます。