🎬three.js / WebXR の 3D アプリのデモ動画を自前で撮る：canvas 録画の勘所と自動化
three.js + WebXR の 3D ギャラリーアプリのデモ動画を、canvas.captureStream と MediaRecorder でアプリ内から録画した際のメモ。DOM が映らない・解像度が巨大になる・コーデックの再生互換といった落とし穴と対処、CDP によるヘッドレス自動撮影と検証方法をまとめた。
threejswebglwebxrmediarecorder
🚶Avaturn アバターに Mixamo 歩行アニメーションをリターゲット：Blender CLI から Three.js ランタイムまで
写真から作った Avaturn アバター（GLB）に Mixamo の歩行アニメーションを適用する方法を3段階で解説。Blender 5.0 CLI での変換、Node.js での比較検証、Three.js ランタイムでのブラウザ完結型リターゲットまで、試行錯誤の記録。
threejsjavascriptblendermixamo
🥽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
🎭Three.js + Puppeteer で VRM キャラクターを動かして動画を自動生成する
Three.js と @pixiv/three-vrm を使ってヘッドレス Chrome 上で VRM モデルをアニメーションさせ、VOICEVOX のリップシンクと組み合わせて VTuber 風解説動画を自動生成するパイプラインの実装メモ。
threejsjavascriptpythonvrm
🎃Three.js + React Three Fiber で GLTF モデルのテクスチャが荒く表示される問題と解決策
Three.js + React Three Fiber で GLTF モデルのテクスチャが荒く表示される問題と解決策
threejs
😸Sketchfab APIでGLBファイルをダウンロード・表示するWebアプリを作る
Sketchfab APIでGLBファイルをダウンロード・表示するWebアプリを作る
nextjsthreejsglbsketchfab
🗂Next 15（React 19 を使用）で、@react-three/fiberとdreiを使う
Next 15（React 19 を使用）で、@react-three/fiberとdreiを使う
nextjsreactthreejs
🎉virtual-museum-tour-threejsを試す
virtual-museum-tour-threejsを試す
threejs