![[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法](https://humanxai.info/images/uploads/nextjs-06-multi-canvas-structure.webp)
[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法
2026-02-06 | lain
Next.js で DOM・2D Canvas・3D Canvas（R3F）を3層構造で扱うための設計パターンを解説します。ゲームUIやインタラクティブな Web 表現に必須となる多段キャンバス構造の実装方法をまとめました。
カテゴリ：R3F
![[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する](https://humanxai.info/images/uploads/nextjs-04-r3f-webxr-renderloop.webp)
[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する
2026-02-04 | lain
Next.js(App Router) + R3F + WebXR 環境で必ず発生する“レンダリングループの衝突”を、内部構造から解説する回。R3F の frameloop・advance・state.clock が XR の animationLoop と同期しない理由、useFrame の遅延、XRControllerModelFactory の不整合、Suspense が XR 中で危険な構造、そして正しい setAnimationLoop 併用方法まで網羅する。
![[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する](https://humanxai.info/images/uploads/nextjs-03-r3f-introduction.webp)
[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する
2026-02-02 | lain
Next.js(App Router) と Three.js を安全に統合するための必須レイヤー、React Three Fiber（R3F）の基礎と構造を整理する。ヴァニラ Three.js と R3F の対応関係、Canvas / useFrame / useThree の最低限の理解、コンポーネント境界（use client）など、Next.js で 3D を扱うための“地図”を作る回。
![[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する](https://humanxai.info/images/uploads/nextjs16-r3f-gltf-viewer.webp)
[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する
2026-02-14 | lain
React Three Fiberで複数のGLTFモデルを横スライド切替できる3Dビューアを実装。モデルの自動センタリング、スケール正規化、Box3による接地処理、lerpによるスムーズ移動、ドラッグ操作の仕組みまで整理する。