カテゴリ：R3F

[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する

[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

タグ： #R3F#WebXR#Three.js#Next.js#Performance#VRM

[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する

[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

タグ： #ReactThreeFiber#R3F#Three.js#WebGL#AppRouter#Next.js