Next.js + React Three Fiber で Meta Quest 対応 VR ビューアを作る：@react-three/xr v6 実装記
はじめに IIIF 画像を原寸大で鑑賞できる VR ビューアを 前回の記事 で A-Frame ベースで作りました。その後 Next.js 16 + React Three Fiber (r3f) 9 に書き換え、3D 部分は動くようになったものの、肝心の Meta Quest で VR 体験ができない状態でした。 @react-three/xr はインストール済みなのにコード上で一切使われていなかったのです。 この記事では、r3f アプリに WebXR（Meta Quest）対応を追加する過程で遭遇した問題と解決策を、失敗も含めて記録します。 技術スタック 項目 バージョン Next.js 16.2.1 React 19.2.4 React Three Fiber 9.5.0 @react-three/xr 6.6.29 Three.js 0.183.2 対象デバイス Meta Quest 3 Step 1: @react-three/xr v6 の基本構成 v6 では、v5 以前の <VRButton> コンポーネントは非推奨になりました。代わりにストアベースの API を使います。 // src/lib/xrStore.ts import { createXRStore } from "@react-three/xr"; export const xrStore = createXRStore(); Canvas 内部を <XR> で囲み、VR セッション開始は xrStore.enterVR() を呼ぶだけ。 ...