PlayCanvasで事務所を作り、現実空間の事務所と連動して、照明がついたり電動ブラインドが動作するようにしたいです。
まずは、PlayCanvasで事務所の空間を作りたいのですが、空間のモデリングについて、やり方がわからないので、こちらのサンプルプロジェクトを見ながら勉強していきます。
![room | Editor 2022-04-23 14-12-52.jpg Room | Editor 2022 04 23 14 12 52](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-14-12-52.jpg)
Overview | Dashboard | Gallery Room V1 | PlayCanvas | 3D HTML5 & WebGL Game Engine
プロジェクトをForkして確認
![room | Launch 2022-04-23 14-19-33.jpg Room | Launch 2022 04 23 14 19 33](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-14-19-33.jpg)
Forkしたプロジェクトを起動すると、こちらの画面が表示されます。
![room | Launch 2022-04-23 14-22-05.jpg Room | Launch 2022 04 23 14 22 05](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-14-22-05.jpg)
マウスを動かすと視界が動き、床をクリックするとその地点に移動します。
![room | Launch 2022-04-23 14-23-23.jpg Room | Launch 2022 04 23 14 23 23](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-14-23-23.jpg)
右下をクリックすると、全体マップと現在地が表示。
それぞれが、PlayCanvasエディタの中のどの部分なのかを調べていきます。
Hierarchyの確認
Hierarchyを確認します。
![room | Editor 2022-04-23 14-14-27.jpg Room | Editor 2022 04 23 14 14 27](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-14-14-27.jpg)
Hierarcyの一番上のRootをクリックしてF(フォーカス)を押すとこの画面。
![room | Editor 2022-04-23 14-26-51.jpg Room | Editor 2022 04 23 14 26 51](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-14-26-51.jpg)
Playerを確認すると、本体は白い円柱。この中にCameraもありました。
![room | Editor 2022-04-23 19-07-28.jpg Room | Editor 2022 04 23 19 07 28](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-07-28.jpg)
PlayerにはplayerCameraというスクリプトが追加されています。
playerCameraのEditをおしてみると
![room | Code Editor 2022-04-23 19-12-15.jpg Room | Code Editor 2022 04 23 19 12 15](https://digital-light.jp/wp-content/uploads/2022/04/room-Code-Editor-2022-04-23-19-12-15.jpg)
てっきり、playerCamera.jsというコードなのかと思いきや、このscriptはcamera.jsというファイル名でした。
![room | Code Editor 2022-04-23 19-15-03.jpg Room | Code Editor 2022 04 23 19 15 03](https://digital-light.jp/wp-content/uploads/2022/04/room-Code-Editor-2022-04-23-19-15-03.jpg)
コードには、
PlayerCamera.attributes.add('camera,{ type:'entity', description: 'Required to assign a camera to entity' });
というのがあり、この記述をすることで、
![room | Editor 2022-04-23 19-16-53.jpg Room | Editor 2022 04 23 19 16 53](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-16-53.jpg)
このようにパラメータが入力できるようです。
Entity(エンティティ)とは?
あらためて、PlayCanvasでよくでてくるEntityとはなにかを調べます。
エンティティはPlayCanvasフレームワークを使用して構築されたほとんどのアプリケーションの基礎を形成します。エンティティは、プレイヤキャラクター、銃弾、敵、または単に空間内の点を表すことができます。
エンティティは特殊な形態のグラフノードです。pc.GraphNodeから挙動の多くを継承します。以下で適用されるすべての操作はグラフノードにも適用することができます。
上記は公式マニュアルのEntityの説明です。PlayCanvas上の様々な実態のあるオブジェクトがEntityという感じでしょうか?(推測)
FloorSpotPointer
![room | Editor 2022-04-23 19-22-10.jpg Room | Editor 2022 04 23 19 22 10](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-22-10.jpg)
playerCameraにあるFloorSpotPointerをクリックすると
![room | Editor 2022-04-23 19-23-18.jpg Room | Editor 2022 04 23 19 23 18](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-23-18.jpg)
Playerと同じHierarchyレベルにあるFloorSpotPointerというEntityにリンクされています。
![room | Editor 2022-04-23 19-24-31.jpg Room | Editor 2022 04 23 19 24 31](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-24-31.jpg)
FloorSpotPointerというEntityには、FloorPointerというシリンダーの3Dモデルが関連付けられていて、pulseというスクリプトがありました。
![room | Code Editor 2022-04-23 19-27-21.jpg Room | Code Editor 2022 04 23 19 27 21](https://digital-light.jp/wp-content/uploads/2022/04/room-Code-Editor-2022-04-23-19-27-21.jpg)
Pluseはpulse.jsというスクリプトでした。
ちなみに間違えて
![room | Editor 2022-04-23 19-36-53.jpg Room | Editor 2022 04 23 19 36 53](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-36-53.jpg)
FloorSpotPointerのEntityをpedestalsにしてしまったら、
![room | Launch 2022-04-23 19-37-36.jpg Room | Launch 2022 04 23 19 37 36](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-19-37-36.jpg)
こんな感じの絵になってました。
![room | Launch 2022-04-23 19-38-41.jpg Room | Launch 2022 04 23 19 38 41](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-19-38-41.jpg)
EntityをFloorSpotPointerの戻すと、マウスの移動先の円盤状のオブジェクトになりました。
四角柱の大きさは?
![room | Launch 2022-04-23 19-40-12.jpg Room | Launch 2022 04 23 19 40 12](https://digital-light.jp/wp-content/uploads/2022/04/room-Launch-2022-04-23-19-40-12.jpg)
このような四角柱が空間にあるのですが、このサイズはどのようになっているのでしょう?
![room | Editor 2022-04-23 19-53-03.jpg Room | Editor 2022 04 23 19 53 03](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-53-03.jpg)
pedestal(台座)というEntityがあるのですが、bookのModelはあるものの、その下の四角柱のModelが見当たりません。
![room | Editor 2022-04-23 19-54-27.jpg Room | Editor 2022 04 23 19 54 27](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-54-27.jpg)
collisionをクリックすると、ピンク色の四角柱になりますが、
![room | Editor 2022-04-23 19-55-09.jpg Room | Editor 2022 04 23 19 55 09](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-19-55-09.jpg)
これは単なる衝突判定だけのような気もします。
CANVASSESというfbxファイル
![room | Editor 2022-04-23 20-01-08.jpg Room | Editor 2022 04 23 20 01 08](https://digital-light.jp/wp-content/uploads/2022/04/room-Editor-2022-04-23-20-01-08.jpg)
Assets/geoにCANVASSES.fbxというファイルがありました。
こちら、ダウンロードできます。
FBX Review | Cross-platform 3D model viewer | Autodesk
というソフトをインストールして、このファイルをみてみたところ
![Autodesk FBX Review (1.5.3) 2022-04-23 20-03-34.jpg Autodesk FBX Review 1 5 3 2022 04 23 20 03 34](https://digital-light.jp/wp-content/uploads/2022/04/Autodesk-FBX-Review-1.5.3-2022-04-23-20-03-34.jpg)
このように表示されました。
これ、それぞれの絵が全部まとまってひとつの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で空間を作る方法をしらべていきます。