PlayCanvasでボタンを押すと外部APIを叩く方法を調査中

PlayCanvasを勉強中。

空間のボタンを押すと、リアルタイムに反映できるテストプロジェクトがあったので、この内容を確認していきたいと思います。

UntitledImage

Overview | Dashboard | HTML/CSS – Live Updates | PlayCanvas | 3D HTML5 & WebGL Game Engine

プロジェクト

UntitledImage

プロジェクトを実行させると、3Dの立方体がぐるぐる回転しており、左上にある”BUTTON”をクリックすると、立方体の色がかわるというもの。

UntitledImage

ASSETSの中にhtmlがあるのでダブルクリックするとエディタがひらきます。

UntitledImage

buttonを押すと立方体の色がかわるので、class=”button”にJSのアクションが仕込まれていそうです。なので、html-handler.jsを開き”button”で検索。

CSS  Live Updates | Code Editor 2022 04 10 23 51 22
var button = this.element.querySelector('.button');

ここで、querySelectorを使ってbuttonクラスのdivを取得しています。

UntitledImage

取得したbuttonはこちら。これに、addEventListenerで’click”アクションを追加しています。

UntitledImage

self.counterを加算して、counterの表示をアップデートします。

HTML | Code Editor 2022 04 11 00 01 54

var obj = pc.app.root.findByName(‘box’)で、3D立法体をobjにし、materialをランダムに変更しています。

つまり、buttonにaddEventListnerで、URLを呼び出すことができれば、外部のAPIを叩くことができそうです。

JSONデータをロードするTutorial

PlayCanvasのTutorialに外部のJSONデータをロードするものがあります。

JSONデータをロードする | Learn PlayCanvas

UntitledImage

loadJsonFromRemoteという関数を作り、HttpRequestの通信をおこなっています。

これを組み合わせればできそうですが、それはまた次回。

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

COMMENT

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