// 2026.05.20

A-Frame：WebXR への最短ルート（Quest 3・Vision Pro・Spectacles）

10:00 JST

ツールチェーン不要 で動くヘッドセットデモが欲しいなら、A-Frame による WebXR が最短ルートです。three.js + WebXR の上に乗った宣言的な Web フレームワークで、HTML ライクなタグでシーンを記述すれば、あとはブラウザがヘッドセットを処理します。

▸ aframe.io ・ github.com/aframevr/aframe（MIT、v1.7.1）

スターターのすべて

完全な WebXR シーンは HTML 1 ファイル — npm もバンドラも不要：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1.5 -3" color="#ff006e"></a-box>
      <a-sphere position="1 1.5 -4" color="#00d4ff"></a-sphere>
      <a-sky color="#1a0f08"></a-sky>
    </a-scene>
  </body>
</html>

A-Frame は Enter VR / Enter AR ボタンを自動的に挿入します。整理された出発点としては、公式 aframe-boilerplate をフォークするか、ドキュメントの Building a Basic Scene を進めてください。コンポーネントのエコシステム（物理、ハンドコントロール、environment、マルチプレイヤー向け networked-aframe）でハッカソンの大半のニーズをカバーできます。

デプロイとデバイス対応

WebXR には HTTPS が必須です。静的ホスティング（GitHub Pages、Vercel、Cloudflare Pages）にデプロイするか、より素早い反復にはローカルで編集を続けつつ、トンネルで開発サーバーを公開 HTTPS URL として公開します — Cloudflare Tunnel、ngrok、または Tailscale Funnel。

最も手早いのは Cloudflare の クイックトンネル — アカウント不要、コマンド 1 つです。ローカルサーバーが使うポートを指定します：

cloudflared tunnel --url http://localhost:8080

公開 URL https://<ランダム>.trycloudflare.com が出力されます。その URL をヘッドセットのブラウザで開きます：

  • Meta Quest 3 — Meta Quest Browser は WebXR をフルサポート：immersive-vr、immersive-ar（パススルー）、ハンドトラッキング。URL を開いて Enter VR/AR をタップ。最もスムーズなターゲット。
  • Apple Vision Pro — visionOS の Safari が WebXR（immersive-vr）をサポート、手／transient-pointer 入力に対応。Quest より新しい対応のため、Enter VR の動作を早めに確認し、インタラクションはシンプルに。
  • Snap Spectacles — Spectacles Browser Lens 経由でサポートされます。WebXR アプリは Lens Studio 不要でそのブラウザ上で直接、immersive-ar モード・ハンドトラッキング を主入力として動作します。Snap のドキュメント上の注意点：ヒットテストは現在エミュレーション（ネイティブ対応は将来予定）、WebXR ゲームパッドは実用的でないため、手の入力前提で設計してください。より深い ネイティブ 連携には Lens Studio ルートも選べます — Spectacles & Lens Studio スターター を参照。

なぜ 2.5 日間のハッカソンに向くのか

  • ビルド不要 — HTML を編集してヘッドセットのブラウザを更新、数秒で反復。
  • 1 コードベースで 3 ターゲット — 同じ URL が Quest 3・Vision Pro・Spectacles で動作（上記の各プラットフォームの入力／モードに留意）。
  • 巨大なコンポーネント群 — エンジンコードを書かず、物理・ネットワーク・コントローラを追加。

関連リンク

ご質問は お問い合わせ ページからどうぞ。

// ニュース一覧へ戻る