メインコンテンツまでスキップ

XR のサポート

PlayCanvas Web Components を使用すると、アプリケーションに Virtual Reality (VR) および Augmented Reality (AR) のサポートを簡単に追加できます。

基本的なセットアップ​

XR のサポートを有効にするには、以下が必要です。

  1. XR 専用スクリプト (Engine NPM package で提供)。
  2. 適切なスクリプトがアタッチされたカメラエンティティ。
  3. XR の開始/終了用の UI。

XR スクリプト​

以下のスクリプトを<pc-asset> 要素を使用して指定します。

<pc-asset src="/node_modules/playcanvas/scripts/esm/xr-controllers.mjs"></pc-asset>
<pc-asset src="/node_modules/playcanvas/scripts/esm/xr-navigation.mjs"></pc-asset>
  • xr-controllers.mjs - 検出された XR コントローラー（手を含む）の XR コントローラーモデル（GLB）を動的にダウンロードし、レンダリングします。
  • xr-navigation.mjs - 基本的なテレポートナビゲーション（ポイント＆選択アクションによる）を実装します。

カメラのセットアップ​

XR スクリプトは、シーンのカメラを次のようにセットアップする必要があります。

<!-- カメラ（XRサポート付き） -->
<pc-entity name="camera root">
    <pc-entity name="camera">
        <pc-camera></pc-camera>
    </pc-entity>
    <pc-scripts>
        <pc-script name="xrControllers"></pc-script>
        <pc-script name="xrNavigation"></pc-script>
    </pc-scripts>
</pc-entity>

XR の開始/終了用 UI​

最後に、ユーザーが XR モードを開始および終了できるように、UI コントロールを追加する必要があります。これは WebXR 固有の要件であり、XR セッションをアクティブ化するにはユーザーのジェスチャーが必要です。AR または VR セッションをトリガーするための2つのシンプルなボタンを作成しましょう。

<button id="enterAR">ARに入る</button>
<button id="enterVR">VRに入る</button>

ユーザーがボタンをクリックしたときに XR セッションをトリガーするように、ボタンにイベントリスナーを追加しましょう。

document.addEventListener('DOMContentLoaded', async () => {
    const appElement = await document.querySelector('pc-app').ready();
    const app = appElement.app;
    const xr = app.xr;
    const camera = app.root.findComponent('camera');

    document.getElementById('enterAR').addEventListener('click', () => {
        xr.start(camera, 'immersive-ar', 'local-floor')
    });

    document.getElementById('enterVR').addEventListener('click', () => {
        xr.start(camera, 'immersive-vr', 'local-floor')
    });

    window.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && xr.active) {
            xr.end();
        }
    });
});

ほとんどの Web Component の例 には、XR のサポートが統合されています。それらのソースコードを参照して、どのように行われているかを確認してください。

次のステップ​

PlayCanvas Engine は、幅広い機能とオプションを備えた包括的な XR サポートを提供しています。詳細については、XR ドキュメント を参照してください。