XR のサポート
PlayCanvas Web Components を使用すると、アプリケーションに Virtual Reality (VR) および Augmented Reality (AR) のサポートを簡単に追加できます。
基本的なセットアップ
XR のサポートを有効にするには、以下が必要です。
- XR 専用スクリプト (Engine NPM package で提供)。
- 適切なスクリプトがアタッチされたカメラエンティティ。
- 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 ドキュメント を参照してください。