PlayCanvas

PlayCanvasで事務所の3D空間をつくりデジタルツインをやってみる その1

PlayCanvasで事務所を作り、現実空間の事務所と連動して、照明がついたり電動ブラインドが動作するようにしたいです。

まずは、PlayCanvasで事務所の空間を作りたいのですが、空間のモデリングについて、やり方がわからないので、こちらのサンプルプロジェクトを見ながら勉強していきます。

Room | Editor 2022 04 23 14 12 52

Overview | Dashboard | Gallery Room V1 | PlayCanvas | 3D HTML5 & WebGL Game Engine

プロジェクトをForkして確認

Room | Launch 2022 04 23 14 19 33

Forkしたプロジェクトを起動すると、こちらの画面が表示されます。

Room | Launch 2022 04 23 14 22 05

マウスを動かすと視界が動き、床をクリックするとその地点に移動します。

Room | Launch 2022 04 23 14 23 23

右下をクリックすると、全体マップと現在地が表示。

それぞれが、PlayCanvasエディタの中のどの部分なのかを調べていきます。

Hierarchyの確認

Hierarchyを確認します。

Room | Editor 2022 04 23 14 14 27

Hierarcyの一番上のRootをクリックしてF(フォーカス)を押すとこの画面。

Room | Editor 2022 04 23 14 26 51

Playerを確認すると、本体は白い円柱。この中にCameraもありました。

Room | Editor 2022 04 23 19 07 28

PlayerにはplayerCameraというスクリプトが追加されています。

playerCameraのEditをおしてみると

Room | Code Editor 2022 04 23 19 12 15

てっきり、playerCamera.jsというコードなのかと思いきや、このscriptはcamera.jsというファイル名でした。

Room | Code Editor 2022 04 23 19 15 03

コードには、

PlayerCamera.attributes.add('camera,{
	type:'entity',
	description: 'Required to assign a camera to entity'
});

というのがあり、この記述をすることで、

Room | Editor 2022 04 23 19 16 53

このようにパラメータが入力できるようです。

Entity(エンティティ)とは?

あらためて、PlayCanvasでよくでてくるEntityとはなにかを調べます。

エンティティの操作 | Learn PlayCanvas

エンティティはPlayCanvasフレームワークを使用して構築されたほとんどのアプリケーションの基礎を形成します。エンティティは、プレイヤキャラクター、銃弾、敵、または単に空間内の点を表すことができます。

エンティティは特殊な形態のグラフノードです。pc.GraphNodeから挙動の多くを継承します。以下で適用されるすべての操作はグラフノードにも適用することができます。

上記は公式マニュアルのEntityの説明です。PlayCanvas上の様々な実態のあるオブジェクトがEntityという感じでしょうか?(推測)

FloorSpotPointer

Room | Editor 2022 04 23 19 22 10

playerCameraにあるFloorSpotPointerをクリックすると

Room | Editor 2022 04 23 19 23 18

Playerと同じHierarchyレベルにあるFloorSpotPointerというEntityにリンクされています。

Room | Editor 2022 04 23 19 24 31

FloorSpotPointerというEntityには、FloorPointerというシリンダーの3Dモデルが関連付けられていて、pulseというスクリプトがありました。

Room | Code Editor 2022 04 23 19 27 21

Pluseはpulse.jsというスクリプトでした。

ちなみに間違えて

Room | Editor 2022 04 23 19 36 53

FloorSpotPointerのEntityをpedestalsにしてしまったら、

Room | Launch 2022 04 23 19 37 36

こんな感じの絵になってました。

Room | Launch 2022 04 23 19 38 41

EntityをFloorSpotPointerの戻すと、マウスの移動先の円盤状のオブジェクトになりました。

四角柱の大きさは?

Room | Launch 2022 04 23 19 40 12

このような四角柱が空間にあるのですが、このサイズはどのようになっているのでしょう?

Room | Editor 2022 04 23 19 53 03

pedestal(台座)というEntityがあるのですが、bookのModelはあるものの、その下の四角柱のModelが見当たりません。

Room | Editor 2022 04 23 19 54 27

collisionをクリックすると、ピンク色の四角柱になりますが、

Room | Editor 2022 04 23 19 55 09

これは単なる衝突判定だけのような気もします。

CANVASSESというfbxファイル

Room | Editor 2022 04 23 20 01 08

Assets/geoにCANVASSES.fbxというファイルがありました。

こちら、ダウンロードできます。

FBX Review | Cross-platform 3D model viewer | Autodesk

というソフトをインストールして、このファイルをみてみたところ

Autodesk FBX Review  1 5 3 2022 04 23 20 03 34

このように表示されました。

これ、それぞれの絵が全部まとまってひとつのFBXファイルになっていたんですね。

FBXファイルはどうやってつくる?

このTutorialの空間はFBXファイルを別ソフトで作成し、取り込んでいるようです。

FBXファイルの作成は無償のソフトのBlenderで作ることができます。

今回、作りたいのは事務所の3D空間なので、”部屋 間取り blender”で調べたところ、

第16回:部屋モデリング(1)~間取り図から部屋の壁をつくる~ │ ゼロから学ぶ3DCG教室

BlenderアドオンのArchimesh+VRを使って、家の間取りをシミュレーションする方法 – CrossRoad

このように、blenderを使えば事務所の3D空間もつくることができそうです。

まとめ

事務所の3D空間は、PlayCanvasでつくるのではなく、blenderで作ってPlayCanvasに取り込む方が現実的な気がしてきました。

ということで、次からはBlenderでつくったfbxファイルをPlayCanvasで取り込む方法や、blenderで空間を作る方法をしらべていきます。

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

COMMENT

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