【Web】Oculus Questなどのプロジェクトをパソコンでデバッグする際に便利な方法【PlayCanvas】

基本的には、Oculus Questのデバイスをデバッグする際にはVR端末などの実機でデバッグをすることが多いと思いますが、Oculus Questの実機で確認ができない場合にはこの、拡張機能として使えるエミュレーターを使うと便利です。

WebXR emulator extensionを使ってPlayCanvasのチュートリアル、WebXR UI Interactionパソコンのブラウザから操作をしてみます。
https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

1. 拡張機能をインストール

拡張機能
WebXR emulator extension
https://github.com/MozillaReality/WebXR-emulator-extension

FirefoxとGoogle Chromeで使用できますのでこちらから拡張機能をインストールします。

Firefox

Google Chrome

2. XRのプロジェクトへアクセスし開発者ツールを開く

1. 対象のWebXRのプロジェクトのURLにアクセスをしブラウザのF12をクリックし開発者ツールを開きます。

1. 拡張機能をインストールするとWebXRの項目が増えているので、WebXRを選択
2. 使用したいVR機器を選択

3. WebXRのプロジェクトに入る

今回のプロジェクトでは、このVRボタンをクリックすることでVRのプロジェクトに入ることができます。

このような形でVRのプロジェクトを操作することができます。

使用したリンク
拡張機能

• WebXR emulator extension
  https://github.com/MozillaReality/WebXR-emulator-extension

デモプロジェクト

• WebXR UI Interaction
  https://developer.playcanvas.com/en/tutorials/webxr-ray-input/

PlayCanvas開発で参考になりそうな記事の一覧です。

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4) - [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57) - [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d) - [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2) - [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df) - [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw) その他関連

• PlayCanvasタグの付いた記事一覧

PlayCanvasのユーザー会のSlackを作りました！

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

• 日本PlayCanvasユーザー会 - Slack