ARCHIVE_LIST // PROTOCOL.LAIN

ARCHIVE_INDEX / PAGE_24

TOTAL_ITEMS: 700

[2026/2/8]

[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理

three-vrm の 0.x/1.x/2.x の違い、BVHLoader の利用条件、PMX(MMD)モデルが glTF/VRM と統合できない理由など、1日で遭遇した互換問題をすべて整理し、Next.js + R3F でキャラクターモデルを扱う際の正しい実装ルートを提示する。

Category: ⚡ Next.js

Tags: #R3F #Three.js #VRM #BVH #PMX #MMD #WebGL

[2026/2/7]

[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ

バニラThree.jsではglTFもVRMも実装済みの開発者向けに、React Three Fiberで同じ資産を扱うための“橋渡し部分”だけをまとめる。useGLTF・Suspense・再レンダー・VRMの内部構造がReactと衝突する問題点など、R3F特有の地雷と設計思想を端的に解説する。

Category: ⚡ Next.js

Tags: #ReactThreeFiber #glTF #VRM #Three.js #React

[2026/2/6]

[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法

Next.js の App Router を使って、DOM UI・2D Canvas（HUD）・3D Canvas（R3F）をレイヤー別に分離し、負荷やバグを最小化しながら安定動作させる設計図を紹介します。Three.js ユーザーが R3F に移行する時の注意点も含めて、Webゲーム風 UI を構築する技術を分かりやすくまとめています。

Category: ⚡ Next.js

Tags: #React #R3F #Three.js #Canvas #WebGL

[2026/2/5]

[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 の地面” を固めるための内容。

Category: ⚡ Next.js

Tags: #Next.js #AppRouter #React #WebDev

[2026/2/4]

[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 と正しく統合するための設計・実装パターンを整理する。

Category: ⚡ Next.js

Tags: #R3F #WebXR #Three.js #Next.js #Performance #VRM

[2026/2/2]

[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 が低レイヤーを奪わないことも解説。

Category: ⚡ Next.js

Tags: #ReactThreeFiber #R3F #Three.js #WebGL #AppRouter #Next.js

[2026/2/1]

[Next.js #02] フレームワークの思想と哲学を理解する

Next.js を正しく使いこなすために欠かせない、React・Next.js・Tailwind の設計思想とその歴史的背景をまとめた記事。UI＝状態の関数という概念、継承からCompositionへの転換、Server/Client 分離の思想、Tailwind がCSS地獄を解決した理由など、実装より先に理解しておきたい“根底の哲学”に焦点を当てる。

Category: ⚡ Next.js

Tags: #React #Next.js #Tailwind #Philosophy #WebDev

[2026/2/1]

[Next.js #01] 初期セットアップと最初の罠の抜け方

Next.js プロジェクトの作成から、page.tsx の最小構成、Tailwind の基本、React DevTools の導入まで。初心者が最速で“動く状態”を作る。

Category: ⚡ Next.js

Tags: #Next.js #React #Tailwind #TypeScript #Web Development

[2026/2/1]

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

Three.js の RenderTarget ミニマップを、円形マスク（alphaMap）で切り抜き、フレームPNGを重ねて HUD 化。CanvasTexture で日付・時刻・称号を描画し、サブカメラをプレイヤー追従＆スムーズ回転させる。UIの重ね順（renderOrder）、depthTest/depthWrite、toneMapped など色と透過の罠もまとめる。

Category: 🟨 JavaScript

Tags: #Three.js #WebGL #MiniMap #RenderTarget #SubCamera #UI #CanvasTexture #alphaMap #HUD