PlayCanvas

PlayCanvasで作成した事務所の中をFPSゲームのように移動できるようにする方法

この記事はGWアドベントカレンダー
事務所デジタルツインプロジェクト 4日目
PlayCanvas 8日目
の記事です。

事務所のデジタルツインをPlayCanvasで作ろうとしていますが、PlayCanvasで事務所のfbxファイルを取り込んだものの次にする前に準備することがあったの記事のとおり、Model Viewer Starter Kitを使うと、なぜだか事務所内が真っ暗にならないので、Blank Projectで作り直すことにしました。

ただし、そうすると、Launchしたときに事務所内を移動する機能が含まれていないので、その方法を調べてプロジェクトに実装する必要があります。

で、これはどうやるんだろう?と調べていたら、「一人称カメラを使った操作と移動」というTutorialがありました。

一人称カメラを使った操作と移動

一人称カメラを使った操作と移動 | Learn PlayCanvas 2022 04 30 18 50 36

マウスで視点を操作、WSADキーで移動するという、まさに、自分がやりたかったものです。

早速このプロジェクトをForkして内容をみてみます。
この方法は後々使うことありそうですね。

実行画面

FPS | Launch 2022 04 30 18 56 04

実行画面です。左下に文字が表示されています。

FPS | Editor 2022 04 30 18 55 15

HIERARCHYにUIがあり

FPS | Editor 2022 04 30 18 58 39

この中にあるinstructionsというHTMLファイルとstylesというCSSファイルで、この表示になっていました。

Player

FPS | Editor 2022 04 30 19 12 24

HIERARCYのPLAYERがこちら。

FPS | Editor 2022 04 30 19 13 19

PLAYERのENTITYには、COLLISION、RIGIDBODY、SCRIPTが含まれています。

FPS | Editor 2022 04 30 19 14 57

HIERARCHYのPLAYERの中にはCameraがあります。

FPS | Editor 2022 04 30 19 15 41

CameraのEntityの中には”CAMERA”がありました。

このPlayer部分を事務所デジタルツインプロジェクトにまるまる移せば、視点移動ができそうな感じです。

HIERARCYのPlayerをコピペ

TutorialプロジェクトのHIERARCYのPlayerを、自分のプロジェクトにコピペしたのですが、それだけだと、

1. Launchしてすぐにどこまでも落下する
2. 操作できない

という状況になります。

なので、

1. CameraにCOLLISIONとRIGID BODYの設定をする
2. FloorにCOLLISIONとRIGID BODYの設定をする
3. SCRIPTもコピペする

をすることで、この問題を解決できます。(いろいろ調べてわかった)

Lightも設定しておこう

Office Digital Twin ver2 | Editor 2022 04 30 21 02 56

LIGHTは部屋の中にいれて、Pointにして、いろいろパラメーターをいじり、部屋の中をちょっと明るくしました。

Office Digital Twin ver2 | Editor 2022 04 30 21 05 08

こんな感じです。

実行画面

マウスで視点を移動、WASDで操作できます。

まとめ

なんとかやりたかったことができました。

次はこの中に照明器具を配置していきます。

ABOUT ME
中畑 隆拓
スマートライト㈱ 代表取締役。IoTソリューションの開発、スマートホーム&オフィスのコンサルティング、DALI,KNX,EnOceanなどのインテグレーションを行っています。

COMMENT

メールアドレスが公開されることはありません。