![[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法](https://assets.lain-lab.com/images/uploads/nextjs-06-multi-canvas-structure.webp)
[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法
Next.js の App Router を使って、DOM UI・2D Canvas（HUD）・3D Canvas（R3F）をレイヤー別に分離し、負荷やバグを最小化しながら安定動作させる設計図を紹介します。Three.js ユーザーが R3F に移行する時の注意点も含めて、Webゲーム風 UI を構築する技術を分かりやすくまとめています。
ARCHIVE_INDEX / PAGE_14
TOTAL_ITEMS: 582
![[Next.js #05] App Router の“基本 UI 構造”を理解する：layout / page / component / client-server の境界](https://assets.lain-lab.com/images/uploads/nextjs-05-app-router-ui-structure.webp)
[Next.js #05] App Router の“基本 UI 構造”を理解する：layout / page / component / client-server の境界
Next.js(App Router) の UI を構成する layout / page / component の仕組みと、Server Component / Client Component の境界を正しく理解するための基礎回。R3F や WebXR を扱う前に “Next.js の地面” を固めるための内容。
![[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する](https://assets.lain-lab.com/images/uploads/nextjs-04-r3f-webxr-renderloop.webp)
[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する
R3F は React ループをベースに WebGL を制御し、WebXR は XRSession の animationLoop を持つ。この2つのループが衝突することで、VRM/MMD のアニメーションずれ、コントローラーの遅延、シーンの再マウントによるブラックアウトなど、R3F 特有の XR 問題が発生する。本記事では R3F Canvas の内部構造（advance / root / frameloop / state.clock）を踏まえて、WebXR と正しく統合するための設計・実装パターンを整理する。
![[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する](https://assets.lain-lab.com/images/uploads/nextjs-03-r3f-introduction.webp)
[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する
Next.js #03 は、Three.js を Next.js(App Router) で動かす際に必須となる React Three Fiber（R3F）の導入編。R3F が何をして何をしないのか、Three.js との対応表、useFrame・Canvas・useThree の基本的役割、SSR と WebGL の構造的なズレ、そしてコンポーネント境界の意味など“理解しておくべき土台”をまとめる。ヴァニラ Three.js を書き続けたい開発者向けに、R3F が低レイヤーを奪わないことも解説。
![[Next.js #02] フレームワークの思想と哲学を理解する](https://assets.lain-lab.com/images/uploads/nextjs-02-philosophy.webp)
[Next.js #02] フレームワークの思想と哲学を理解する
Next.js を正しく使いこなすために欠かせない、React・Next.js・Tailwind の設計思想とその歴史的背景をまとめた記事。UI＝状態の関数という概念、継承からCompositionへの転換、Server/Client 分離の思想、Tailwind がCSS地獄を解決した理由など、実装より先に理解しておきたい“根底の哲学”に焦点を当てる。
![[Next.js #01] 初期セットアップと最初の罠の抜け方](https://assets.lain-lab.com/images/uploads/nextjs-intro-01-setup.webp)
[Next.js #01] 初期セットアップと最初の罠の抜け方
Next.js プロジェクトの作成から、page.tsx の最小構成、Tailwind の基本、React DevTools の導入まで。初心者が最速で“動く状態”を作る。
![[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）](https://assets.lain-lab.com/images/uploads/javascript-threejs-minimap-ui-frame-circle-mask-clock.webp)
[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）
Three.js の RenderTarget ミニマップを、円形マスク（alphaMap）で切り抜き、フレームPNGを重ねて HUD 化。CanvasTexture で日付・時刻・称号を描画し、サブカメラをプレイヤー追従＆スムーズ回転させる。UIの重ね順（renderOrder）、depthTest/depthWrite、toneMapped など色と透過の罠もまとめる。
![[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転](https://assets.lain-lab.com/images/uploads/javascript-threejs-minimap-render-target-subcamera-smooth-rotation.webp)
[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転
Three.jsでミニマップを作る実用実装。サブカメラ（俯瞰）→WebGLRenderTarget→Plane表示の基本から、FOV/アスペクト比を使った左上固定、キャラ回転に追従するカーナビ式回転、atan2で角度差を-π〜+πに正規化してlerpでスムーズ化する手法までまとめる。
![[数学] 数学は風化しない：エンジニアが最後に辿り着く武器](https://assets.lain-lab.com/images/uploads/math-never-decays-core-skill-for-engineers.webp)
[数学] 数学は風化しない：エンジニアが最後に辿り着く武器
プログラミング言語もフレームワークも常に変化するが、ベクトル・行列・三角関数・クォータニオンなどの数学は一生使える普遍的な知識。Three.jsとUnityの実装経験から導いた「数学は風化しない」という結論を解説する。
![[diary] 限界を超えた先の休息。半年間の軌跡と新たな相棒 [2026-01-29]](https://assets.lain-lab.com/images/uploads/diary-2026-01-29.webp)
[diary] 限界を超えた先の休息。半年間の軌跡と新たな相棒 [2026-01-29]
2025年5月のブログ開設から現在までの技術的変遷を総括。ChatGPTからGeminiへの移行を決意させた、開発現場のリアルな葛藤についても記録。
![[JavaScript] sin/cos アニメーションまとめ：Three.jsで“動き”を作る最短パターン集](https://assets.lain-lab.com/images/uploads/javascript-sin-cos-animation-patterns-threejs.webp)
[JavaScript] sin/cos アニメーションまとめ：Three.jsで“動き”を作る最短パターン集
Three.jsで“動き”を作るとき最初に覚えるべき sin/cos パターンを、振幅・周波数・オフセットの考え方から、位置/回転/色への適用例まで短くまとめた。
![[Unity #16] Starter Assets + VRM + OpenXRを同一シーンで共存・判定切替](https://assets.lain-lab.com/images/uploads/unity-16-vr-pc-starter-assets-openxr-vrm.webp)
[Unity #16] Starter Assets + VRM + OpenXRを同一シーンで共存・判定切替
Unity 2022 LTSでStarter AssetsのThirdPersonControllerとVRMモデル、OpenXRのVR環境を同一シーンに統合し、PCモードとVRモードを自動判定して切り替える完全な手順とハマりどころの解説。PlatformSwitcherによる自動切替方式、カメラ・AudioListener競合排除、VR初期化待機のノウハウをまとめた記事。