Next.js + React Three Fiber で Meta Quest 対応 VR ビューアを作る：@react-three/xr v6 実装記

Fri, 03 Apr 2026 00:00:00 +0900

はじめに

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() を呼ぶだけ。

IIIF VR ビューア：WebXR + A-Frame で文化資源を原寸大で体験する

Tue, 31 Mar 2026 00:00:00 +0900

はじめに

IIIF（International Image Interoperability Framework）で公開されている文化資源の画像を、原寸大で体験できたら面白いのではないか。そんな発想から、江戸時代の町家を再現した VR 空間に IIIF 画像を配置し、ブラウザや VR ヘッドセットで閲覧できるビューアを開発しました。

技術スタックは A-Frame 1.5.0 + THREE.js 0.158.0 + WebXR。3D モデルは Sketchfab で公開されている Japanese Machiya Set Kit をベースに、部位ごとに分割して組み合わせています。

この記事では「うまくいったこと」だけでなく、ハマった失敗とその原因・修正も正直に書きます。

プロジェクト概要

項目	内容
レンダラー	A-Frame 1.5.0 / THREE.js 0.158.0
XR	WebXR (VR ヘッドセット対応)
画像規格	IIIF Presentation API v3 / Image API v2
3D モデル	Sketchfab: Japanese Machiya Set Kit (GLB)
アバター	VRM + Mixamo リターゲット
補助ライブラリ	three-vrm v2, aframe-extras
ツール	gltf-transform, Blender CLI

部屋の設計

部屋のサイズは TAT_SZ = 1.76 m（江戸間の畳 1 枚の短辺）を基準単位にしています。畳・壁・障子・天井・提灯をパーツとしてタイル状に並べることで、IIIF 画像のサイズに応じて柔軟に部屋サイズを変更できる設計です。

WebXR on デジタルアーカイブシステムの技術ブログ

Next.js + React Three Fiber で Meta Quest 対応 VR ビューアを作る：@react-three/xr v6 実装記

はじめに

技術スタック

Step 1: @react-three/xr v6 の基本構成

IIIF VR ビューア：WebXR + A-Frame で文化資源を原寸大で体験する

はじめに

プロジェクト概要

部屋の設計