【約10分で完成!?】PlayCanvas作品作成チュートリアル【WebGL】

FBXモデルをPlayCanvasに配置して、作品の中をWebGLで歩き廻れるシーンを公開するまでを簡単に解説します。
↓例としてこんなシーンをつくっていきます。(移動方法:W↑ A← S↓ D→)

より詳しい解説が必要な方はPlayCanvas公式ホームページ、または3月17日(火)にオンライン開催される建築×PlayCanvas! 仮想万博作りたい人向けハンズオンをご視聴ください。

①準備するもの

配置したいモデルのFBXデータ
 モデルはいくつでもかまいません。obj形式でも可能ですが、ここではFBXで解説していきます。
 ドアなどの通り抜けたい部分は別々のFBXデータとして書き出して置くと、その部分だけ通り抜けできるように設定することができます。

・PlayCanvasのアカウント
 PlayCanvasのアカウントをお持ちでない方は、 https://playcanvas.comでアカウントを作っておいてください。
 とりあえずFREEプランで大丈夫です。( 200MB Storage まで作ることができます)

③シーンを作る

https://playcanvas.com/project/668736/overview/expo2020_template のプロジェクトをフォークしてください。
 フォークすると自分のプロジェクトとして編集できるようになります。

プロジェクトの名前は自由につけてください。
EDITORをクリック。
このシーンをクリックして開いてください。

④モデルを配置する

「FBX」のフォルダをダブルクリックして開き、FBXモデルドラッグ&ドロップします。

.jsonファイルをシーンにドラッグ&ドロップして配置します。

⑤マテリアルを設定する

マテリアルにテクスチャが割当たっていない場合、PlayCanvas上でテクスチャを設定する必要があります。このレンガのマテリアルにテクスチャを割り当ててみます。

テクスチャは「Materials free」などでググるとフリーで使えるテクスチャのサイトがいくつか出てくるので、希望のものを探してMaterialフォルダにアップロードしてください。https://cc0textures.com/とかおすすめです。

マテリアルの各パラメータにテクスチャを割り当ててください。
マテリアルのパラメータについて詳しくはこちら( https://developer.playcanvas.com/ja/user-manual/assets/materials )。

⑥コリジョンを設定する

ドア以外のメッシュに当たり判定を設定します。当たり判定を設定したいモデルを選択し、「Collision」と「Rigit Body」のパラメータを追加するとそのメシュは通り抜けできなくなります。
例としてこのシーンでは、buildingのメッシュに当たり判定を設定します。ドアのメッシュはそのままにしておくことで、壁には当たるけどドア部分は通り抜けできることになります。

Collisionでは「Mesh」を選択肢、モデルと同じ.jsonデータをドラッグ&ドロップして設定してください。

Rigit Bodyのパラメータは初期値のままでOKです。

⑦Playerの位置を調整する

Playerの開始位置を調整します。左の「HIERARCHY」の中の「Player」をクリックすると、シーン内のPlayerがハイライト表示されます。
赤・青・緑の矢印を動かくことで位置を移動できます。

⑧試しに起動してみる

右上の再生ボタンクリックで起動することができます。

⑨公開する

左下の「Publish/Download」をクリックします。

提出フォームにはこちらのURLを記入してください。(提出フォームは受付申込時のメールにリンクを記載しています。)

一度公開したあとに編集してなんどでも公開し直すことができます。BUILDSが複数になるので、公開したいものの「Primary build」をクリックしてアクティブにしておいてください。

最後に

作品ができたら、SNSで「#仮想万博」のハッシュタグをつけて公開してください!提出前でも大丈夫です👌
また、PlayCanvasの操作に関する質問はPlayCanvas運営事務局様がこちらのSlackで相談にのってくださるそうです。ぜひご活用ください。
https://playcanvasjphq.slack.com/join/shared_invite/enQtNzI4MTYzMTkxNDczLTRjZDAzNGUyZGFhMGJkODBjNTg0MTI0MDA0YjJkYzkzYzc4MDhhMTc2NDdmNDJkNDhjMWE3YWJiOGZiYjE0OGM

このチュートリアルはあくまでも必要最低限の情報を記載した簡易版です。より詳しい解説が必要な方はPlayCanvas公式ホームページ、または3月17日(火)にオンライン開催される建築×PlayCanvas! 仮想万博作りたい人向けハンズオンをご視聴ください。 ぜひよりハイクオリティなシーン作成を目指してくださいね✨