🎬three.js / WebXR の 3D アプリのデモ動画を自前で撮る：canvas 録画の勘所と自動化
three.js + WebXR の 3D ギャラリーアプリのデモ動画を、canvas.captureStream と MediaRecorder でアプリ内から録画した際のメモ。DOM が映らない・解像度が巨大になる・コーデックの再生互換といった落とし穴と対処、CDP によるヘッドレス自動撮影と検証方法をまとめた。
threejswebglwebxrmediarecorder
🥽Next.js + React Three Fiber で Meta Quest 対応 VR ビューアを作る：@react-three/xr v6 実装記
Next.js + React Three Fiber の 3D ビューアを @react-three/xr v6 で Meta Quest 対応にした記録。CameraRig が XR カメラを横取りする問題、useXRControllerLocomotion の callback vs ref 形式の落とし穴、Quest 実機デバッグの工夫など、ハマりポイントと解決策をまとめました。
webxrreact-three-fibernextjsthreejs
🏯IIIF VR ビューア：WebXR + A-Frame で文化資源を原寸大で体験する
IIIF 対応画像を江戸町家の VR 空間に原寸大で配置し、ブラウザや VR ヘッドセットで閲覧できる WebXR ビューアの開発記録。A-Frame + THREE.js による三人称カメラ、VRM アバター、タイル LOD など、WebXR 開発で遭遇した問題と解決策をまとめました。
webxraframethreejsjavascript