PlayCanvas

Blenderで作成した事務所データをPlayCanvasに取り込む

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

Autodesk FBX Review  1 5 3 2022 04 28 23 36 59

スタッフの橋本くんに事務所の3DデータをBlenderで作ってもらったので、これをPlayCanvasに取り込んでみます。

PlayCanvaでプロジェクトを立ち上げる

PlayCanvasのサイトにアクセス。

PLAYCANVAS | 日本公式サイト

PLAYCANVAS | 日本公式サイト 2022 04 29 11 08 44

ログインしてから、NEWでプロジェクトを作成します。

Takahiro Nakahata | Projects | PlayCanvas | 3D HTML5  WebGL Game Engine 2022 04 29 11 06 35

“Model Viewer Starter Kit”を選び、プロジェクト名を手入力し右下の”CREATE”をクリック。

Overview | Dashboard | OfficeDigitalTwin | PlayCanvas | 3D HTML5  WebGL Game Engine 2022 04 29 11 10 45

“EDITOR”ボタンをクリック

OfficeDigitalTwin | Editor 2022 04 29 11 12 44

“SCENES”がでるので、”Main”をクリック。

OfficeDigitalTwin | Editor 2022 04 29 11 15 56

“Model Viewer Starter Kit”のEditor画面が開きました。

Model Viewer Starter Kitを実行してみる

OfficeDigitalTwin | Editor 2022 04 29 11 17 08

右上の”Launch”ボタンをクリック。

OfficeDigitalTwin | Launch 2022 04 29 11 18 32

Defaultではいっている、3Dオブジェクトを見ることが出来ます。マウスをグリグリすることで角度変えたり、ズームイン・アウトすることができます。

で、これを事務所のfbxファイルでできるようにします。

事務所のfbxデータを取り込む

スマートライト事務所のfbxファイルはこちらからダウンロードできます。
事務所fbxファイル

OfficeDigitalTwin | Editor 2022 04 29 11 21 07

左上の”HIERARCY”をみると、先程表示された3Dオブジェクトは”playcanvas”になります。

OfficeDigitalTwin | Editor 2022 04 29 11 26 28

3Dのオブジェクトとしては、まずこれをつくります。

OfficeDigitalTwin | Editor 2022 04 29 11 35 54

右下のASSETの一番上の階層で右クリック。”Folder”を追加。

OfficeDigitalTwin | Editor 2022 04 29 11 37 40

このフォルダの名前を”Office”にします。

OfficeDigitalTwin | Editor 2022 04 29 11 38 58

このフォルダに事務所のfbxファイル(SL_Office.fbx)をドラッグ&ドロップするとこのようになります。

事務所3DデータをViewerでみれるようにする

OfficeDigitalTwin | Editor 2022 04 29 11 47 20

先程のフォルダの中に、このようなアイコンのファイルが存在します。これを、キャンパス上にドラッグ&ドロップ。

OfficeDigitalTwin | Editor 2022 04 29 12 01 23

これで、事務所の3DモデルがPlayCanvasでみれるようになりました。

OfficeDigitalTwin | Launch 2022 04 29 12 02 29

マウスを動かすことで、色んな角度からみれます。

OfficeDigitalTwin | Launch 2022 04 29 12 03 18

ズームアップすることで、事務所の中に入ることもできました。

このモデルでは天井が無いので、照明器具を配置する場合はまずそうですね。

事務所3Dファイルを削除

OfficeDigitalTwin | Editor 2022 04 29 12 05 39

HIERARCYに”SL_Office”というENTITYがあります。

OfficeDigitalTwin | Editor 2022 04 29 12 06 20

これをDeleteすると、キャンパスから事務所の3Dファイルが消えます。

OfficeDigitalTwin | Editor 2022 04 29 12 07 57

ASSETフォルダにある3Dファイルも削除しておきます。

OfficeDigitalTwin | Editor 2022 04 29 12 08 35

注意メッセージが出ますので、”DELETE”で削除。

同じ手順で屋根付き事務所3Dデータを取り込む

屋根付き事務所fbxファイルはこちら
事務所fbxファイル(屋根付き)

OfficeDigitalTwin | Editor 2022 04 29 12 13 13

同じ手順で屋根付きの事務所3Dデータを取り込みました。

OfficeDigitalTwin | Editor 2022 04 29 12 13 56

Launchすると、WASDキーで前後左右の移動、QEでワールド内の上下移動ができます。

今回つくったプロジェクト

プロジェクト:OfficeDigitalTwin | PlayCanvas | 3D HTML5 & WebGL Game Engine

まとめ

以上でBlenderで作成した事務所3DデータをPlayCanvas上で利用することができました。

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

COMMENT

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