PlayCanvasを勉強中。
空間のボタンを押すと、リアルタイムに反映できるテストプロジェクトがあったので、この内容を確認していきたいと思います。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage.png)
Overview | Dashboard | HTML/CSS – Live Updates | PlayCanvas | 3D HTML5 & WebGL Game Engine
プロジェクト
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-1.png)
プロジェクトを実行させると、3Dの立方体がぐるぐる回転しており、左上にある”BUTTON”をクリックすると、立方体の色がかわるというもの。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-2.png)
ASSETSの中にhtmlがあるのでダブルクリックするとエディタがひらきます。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-3.png)
buttonを押すと立方体の色がかわるので、class=”button”にJSのアクションが仕込まれていそうです。なので、html-handler.jsを開き”button”で検索。
![CSS - Live Updates | Code Editor 2022-04-10 23-51-22.jpg CSS Live Updates | Code Editor 2022 04 10 23 51 22](https://digital-light.jp/wp-content/uploads/2022/04/CSS-Live-Updates-Code-Editor-2022-04-10-23-51-22.jpg)
var button = this.element.querySelector('.button');
ここで、querySelectorを使ってbuttonクラスのdivを取得しています。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-4.png)
取得したbuttonはこちら。これに、addEventListenerで’click”アクションを追加しています。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-5.png)
self.counterを加算して、counterの表示をアップデートします。
![HTML | Code Editor 2022-04-11 00-01-54.jpg HTML | Code Editor 2022 04 11 00 01 54](https://digital-light.jp/wp-content/uploads/2022/04/HTML-Code-Editor-2022-04-11-00-01-54.jpg)
var obj = pc.app.root.findByName(‘box’)で、3D立法体をobjにし、materialをランダムに変更しています。
つまり、buttonにaddEventListnerで、URLを呼び出すことができれば、外部のAPIを叩くことができそうです。
JSONデータをロードするTutorial
PlayCanvasのTutorialに外部のJSONデータをロードするものがあります。
JSONデータをロードする | Learn PlayCanvas
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/04/UntitledImage-6.png)
loadJsonFromRemoteという関数を作り、HttpRequestの通信をおこなっています。
これを組み合わせればできそうですが、それはまた次回。