PlayCanvas

PlayCanvasでボタンを押すと照明をOn/Offする方法

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

事務所にDALIというデジタル制御できる照明システムを導入したので、PlayCanvasで作成した仮想空間の事務所と連動し、事務所のデジタルツインをやろうとしています。

前回、照明器具の導入ができたので(一部のダウンライトだけ)、PlayCanvasの中の照明をOn/Offできるようにしたいと考えています。

参考にするプロジェクト

PlayCanvasには参考にできるチュートリアルプロジェクト&記事がまとめられており、やりたいことを調べるにはこちらで該当するプロジェクトを探し、Forkして確認することで理解するできます。

チュートリアル | Learn PlayCanvas 2022 05 05 09 14 02

“Lighting”という項目があったので、このページを開きます。

チュートリアル Lighting | Learn PlayCanvas

ライトの操作 | Learn PlayCanvas 2022 05 05 09 15 41

”ライトの操作”というプロジェクトがあり、定められたキーを押すと、該当する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

プロジェクトをForkしてEditorを開きます。

ForkLights | Editor 2022 05 05 09 23 31

懐中電灯の形をしたTorchにどんなscriptが設定されているかを確認します。

ForkLights | Editor 2022 05 05 09 25 15

HIERARCYの中のPivot1にTorchというENTITYがあり、その中にSpotLightというLightのオブジェクトが設定されていました。

ForkLights | Editor 2022 05 05 09 32 59

これです。

lightHandler.js

ForkLights | Editor 2022 05 05 09 27 03

“lightHandler.js”というスクリプトがあったのでこれをチェックします。

ForkLights | Code Editor 2022 05 05 09 33 39

initializeにて、”SpotLight”をthis.spotに設定。

ForkLights | Code Editor 2022 05 05 09 35 27

updateでは、KEY_1が押されるたびに、this.spot.light.enebaledの値が反対になるようになっています。

TestLightで実験

ForkLights | Editor 2022 05 05 09 39 13

HIERARCYのルートに”TestLight”というSpotLightのオブジェクトを挿入。

ForkLights | Editor 2022 05 05 09 40 13

見やすい位置にするように、Positionを設定。

ForkLights | Editor 2022 05 05 09 39 52

もとからあったPointLightとSpotLightのLight機能はOffにします。

次にlightHandler.jsを編集

ForkLights | Code Editor 2022 05 05 09 42 05

initializeにTestLight用のコードを追加。

ForkLights | Code Editor 2022 05 05 09 43 07

Updateに、”4″を押すと、On/Offするコードを追加。

saveして試します。

実行結果

ForkLights | Launch 2022 05 05 09 44 38

実行したところ、TestLightは点灯していたのですが、”4″を押したところ、

ForkLights | Launch 2022 05 05 09 45 54
[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

この部分ですね。

“lightHandler.js”にはそれらしきものが見当たらないので、ENTITYの中にあるのかもしれません。

プレゼンテーション1 2022 05 05 09 53 40

SpotLightとTestLightのENTITYを確認したところ、CastShadowsにチェックがあるかないかで、あまり関係なさそうです。

あ!

よく見たら、単なるタイプミスでした。

this.test = app.root.findByName("TestLihgt");

正しくは、”TestLight”

再度確認

ForkLights | Launch 2022 05 05 10 00 13

“4”キーを押すことで、追加したTestLightがOn/Offすることができました。

まとめ

以上、PlayCanvasで照明をOn/Offする方法が確認できました。

次は、事務所の照明をOn/Offするコードを自分のプロジェクトに追加していきます。

また、このコードのきっかけを外部から受け取れれば、実際の事務所でOn/Offした状況を、仮想空間上でも反映できることになります。

外部からの信号の受け取りはWebSocketになるとおもうので、ここまでをなんとかGWアドベントカレンダーの最終日までにできるようにしたいです。

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

COMMENT

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