この記事は事務所デジタルツインプロジェクト-PlayCanvas/Babylonjs | GWアドベントカレンダーの7日目の記事です。
事務所にDALIというデジタル制御できる照明システムを導入したので、PlayCanvasで作成した仮想空間の事務所と連動し、事務所のデジタルツインをやろうとしています。
前回、照明器具の導入ができたので(一部のダウンライトだけ)、PlayCanvasの中の照明をOn/Offできるようにしたいと考えています。
参考にするプロジェクト
PlayCanvasには参考にできるチュートリアルプロジェクト&記事がまとめられており、やりたいことを調べるにはこちらで該当するプロジェクトを探し、Forkして確認することで理解するできます。
![チュートリアル | Learn PlayCanvas 2022-05-05 09-14-02.jpg チュートリアル | Learn PlayCanvas 2022 05 05 09 14 02](https://digital-light.jp/wp-content/uploads/2022/05/dbe37fc209968b482532f36fd67b8edc.jpg)
“Lighting”という項目があったので、このページを開きます。
チュートリアル Lighting | Learn PlayCanvas
![ライトの操作 | Learn PlayCanvas 2022-05-05 09-15-41.jpg ライトの操作 | Learn PlayCanvas 2022 05 05 09 15 41](https://digital-light.jp/wp-content/uploads/2022/05/57b9622882f921f86699aeed796728a4.jpg)
”ライトの操作”というプロジェクトがあり、定められたキーを押すと、該当するLightのOn/Offができるので、このプロジェクトを調べれば事務所の照明のOn/Offもできそうです。
Tutorial: Controlling LightsをFork
“Tutorial: Controlling Lights”のプロジェクトはこちらのリンク。
Overview | Dashboard | Tutorial: Controlling Lights | PlayCanvas | 3D HTML5 & WebGL Game Engine
![Overview | Dashboard | Tutorial: Controlling Lights | PlayCanvas | 3D HTML5 & WebGL Game Engine 2022-05-05 09-20-59.jpg Overview | Dashboard | Tutorial Controlling Lights | PlayCanvas | 3D HTML5 WebGL Game Engine 2022 05 05 09 20 59](https://digital-light.jp/wp-content/uploads/2022/05/Overview-Dashboard-Tutorial-Controlling-Lights-PlayCanvas-3D-HTML5-WebGL-Game-Engine-2022-05-05-09-20-59.jpg)
プロジェクトをForkしてEditorを開きます。
![ForkLights | Editor 2022-05-05 09-23-31.jpg ForkLights | Editor 2022 05 05 09 23 31](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-23-31.jpg)
懐中電灯の形をしたTorchにどんなscriptが設定されているかを確認します。
![ForkLights | Editor 2022-05-05 09-25-15.jpg ForkLights | Editor 2022 05 05 09 25 15](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-25-15.jpg)
HIERARCYの中のPivot1にTorchというENTITYがあり、その中にSpotLightというLightのオブジェクトが設定されていました。
![ForkLights | Editor 2022-05-05 09-32-59.jpg ForkLights | Editor 2022 05 05 09 32 59](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-32-59.jpg)
これです。
lightHandler.js
![ForkLights | Editor 2022-05-05 09-27-03.jpg ForkLights | Editor 2022 05 05 09 27 03](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-27-03.jpg)
“lightHandler.js”というスクリプトがあったのでこれをチェックします。
![ForkLights | Code Editor 2022-05-05 09-33-39.jpg ForkLights | Code Editor 2022 05 05 09 33 39](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Code-Editor-2022-05-05-09-33-39.jpg)
initializeにて、”SpotLight”をthis.spotに設定。
![ForkLights | Code Editor 2022-05-05 09-35-27.jpg ForkLights | Code Editor 2022 05 05 09 35 27](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Code-Editor-2022-05-05-09-35-27.jpg)
updateでは、KEY_1が押されるたびに、this.spot.light.enebaledの値が反対になるようになっています。
TestLightで実験
![ForkLights | Editor 2022-05-05 09-39-13.jpg ForkLights | Editor 2022 05 05 09 39 13](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-39-13.jpg)
HIERARCYのルートに”TestLight”というSpotLightのオブジェクトを挿入。
![ForkLights | Editor 2022-05-05 09-40-13.jpg ForkLights | Editor 2022 05 05 09 40 13](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-40-13.jpg)
見やすい位置にするように、Positionを設定。
![ForkLights | Editor 2022-05-05 09-39-52.jpg ForkLights | Editor 2022 05 05 09 39 52](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Editor-2022-05-05-09-39-52.jpg)
もとからあったPointLightとSpotLightのLight機能はOffにします。
次にlightHandler.jsを編集
![ForkLights | Code Editor 2022-05-05 09-42-05.jpg ForkLights | Code Editor 2022 05 05 09 42 05](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Code-Editor-2022-05-05-09-42-05.jpg)
initializeにTestLight用のコードを追加。
![ForkLights | Code Editor 2022-05-05 09-43-07.jpg ForkLights | Code Editor 2022 05 05 09 43 07](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Code-Editor-2022-05-05-09-43-07.jpg)
Updateに、”4″を押すと、On/Offするコードを追加。
saveして試します。
実行結果
![ForkLights | Launch 2022-05-05 09-44-38.jpg ForkLights | Launch 2022 05 05 09 44 38](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Launch-2022-05-05-09-44-38.jpg)
実行したところ、TestLightは点灯していたのですが、”4″を押したところ、
![ForkLights | Launch 2022-05-05 09-45-54.jpg ForkLights | Launch 2022 05 05 09 45 54](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Launch-2022-05-05-09-45-54.jpg)
[lightHandler.js?id=80800257&branchId=f466f56f-1c9d-4bb7-a2e9-853eeabf7cee:37]: Cannot read properties of null (reading 'light') TypeError: Cannot read properties of null (reading 'light') at scriptType.LightHandler.update (https://launch.playcanvas.com/api/assets/files/lightHandler.js?id=80800257&branchId=f466f56f-1c9d-4bb7-a2e9-853eeabf7cee:37:19) at ScriptComponent._scriptMethod (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:39912:19) at ScriptComponent._onUpdate (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:39957:11) at ScriptComponentSystem._callComponentMethod (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:65863:49) at ScriptComponentSystem._onUpdate (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:65880:9) at ComponentSystemRegistry.fire (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:722:18) at Application.update (https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:72441:17) at https://launch.playcanvas.com/editor/scene/js/engine/playcanvas.dbg.js?version=1.53.4:73027:16
エラーが発生。
Cannot read properties of null (reading ‘light’)
TestLightではlightというプロパティが設定されていないようです。
![ForkLights | Code Editor 2022-05-05 09-48-16.jpg ForkLights | Code Editor 2022 05 05 09 48 16](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Code-Editor-2022-05-05-09-48-16.jpg)
この部分ですね。
“lightHandler.js”にはそれらしきものが見当たらないので、ENTITYの中にあるのかもしれません。
![プレゼンテーション1 2022-05-05 09-53-40.jpg プレゼンテーション1 2022 05 05 09 53 40](https://digital-light.jp/wp-content/uploads/2022/05/89ed351777ddb90f83652528cd30c229.jpg)
SpotLightとTestLightのENTITYを確認したところ、CastShadowsにチェックがあるかないかで、あまり関係なさそうです。
あ!
よく見たら、単なるタイプミスでした。
this.test = app.root.findByName("TestLihgt");
正しくは、”TestLight”
再度確認
![ForkLights | Launch 2022-05-05 10-00-13.jpg ForkLights | Launch 2022 05 05 10 00 13](https://digital-light.jp/wp-content/uploads/2022/05/ForkLights-Launch-2022-05-05-10-00-13.jpg)
“4”キーを押すことで、追加したTestLightがOn/Offすることができました。
まとめ
以上、PlayCanvasで照明をOn/Offする方法が確認できました。
次は、事務所の照明をOn/Offするコードを自分のプロジェクトに追加していきます。
また、このコードのきっかけを外部から受け取れれば、実際の事務所でOn/Offした状況を、仮想空間上でも反映できることになります。
外部からの信号の受け取りはWebSocketになるとおもうので、ここまでをなんとかGWアドベントカレンダーの最終日までにできるようにしたいです。