[ CATEGORY / ⚡ Next.js ]

MATCHED_ITEMS: 56
[Next.js #56] Three.jsで創る無限の箱庭 — キツネと歩くプロシージャル・ワールド
[2026/3/29]

[Next.js #56] Three.jsで創る無限の箱庭 — キツネと歩くプロシージャル・ワールド

Next.jsとThree.js、GLSL、Web Workersを駆使したプロシージャル生成世界の最終統合。TPSカメラの実装、キツネのGLTFモデルと歩行アニメーションの同期、ノイズベースの衝突判定の安定化手法を詳しく解説します。
[Next.js #55] Boids × Flow Field — 10万の鳥が「狂気の空」を舞う
[2026/3/28]

[Next.js #55] Boids × Flow Field — 10万の鳥が「狂気の空」を舞う

穏やかな群れを作るはずが、完成したのは「ドラッグ オン ドラグーン」のような絶望の空でした。GPUの限界に挑む10万羽の描画、翼のしなり（Whip）の数式、そしてGLBモデル本来のテクスチャカラーを維持するシェーダーハックをまとめます。
[Next.js #54] Procedural Wind & Flow — Three.jsで草木を揺らし、雲を流す実装
[2026/3/27]

[Next.js #54] Procedural Wind & Flow — Three.jsで草木を揺らし、雲を流す実装

Next.jsとThree.jsを用いたプロシージャルワールド開発。FBMノイズを利用した風のベクトル場を生成し、頂点シェーダーで10万本の植物と雲を動かすVFXテクニックの全貌を解説します。
[Next.js 3D #53] プロシージャルな植生配置とGUIによる動的コントロール — 確率マップで森を錬成する
[2026/3/26]

[Next.js 3D #53] プロシージャルな植生配置とGUIによる動的コントロール — 確率マップで森を錬成する

ボクセル地形の地表に木や草を自然に群生させる「Object Distribution」の実装記録。lil-gui を導入し、森の広がりや木々の密度をスライダーで直感的に操作できるプロシージャル・デザインの醍醐味を紹介します。
[Next.js #52] Procedural Caves の実装 — ヒメドローンで未知の地下空間を探索する
[2026/3/25]

[Next.js #52] Procedural Caves の実装 — ヒメドローンで未知の地下空間を探索する

Three.jsを用いたプロシージャルなボクセル生成に、3Dノイズを使った洞窟（Perlin Worms）を追加。地下に潜ると暗転するライティング制御や、マウスによるTPS視点のカメラ操作の実装コードを公開します。
[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター
[2026/3/24]

[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター

2Dハイトマップの限界を突破し、3Dノイズによる「密度」の概念を導入。マルチスレッド処理で60FPSを維持しながら、広大な空を自由に飛び回る高密度ボクセル世界の構築手法を解説します。
[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装
[2026/3/23]

[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装

Three.jsとノイズ関数を用いて生成した無限地形の上空を、WASD操作で飛行するシミュレーターの実装手法。クォータニオンを用いたジンバルロックのない旋回ロジックや、InstancedMeshによるボクセル雲（CloudChunk）の生成を統合します。
[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング
[2026/3/21]

[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング

Three.jsのInstancedMeshを使って生成したボクセル地形に対し、setColorAtによるバイオームの塗り分け、Mulberry32を用いた文字列からのシード地形生成、DirectionalLightのアニメーションによる昼夜サイクル風の演出を追加する具体的なコードとその仕組みを解説します。
[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画
[2026/3/21]

[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画

Three.jsのInstancedMeshを用いて400万個のボクセルを生成し、FPSとGPU負荷を計測。Next.js環境でのパフォーマンスチューニングと、AI生成動画とは異なる「リアルタイムレンダリング」の裏側に迫ります。
[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する
[2026/3/20]

[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する

Three.js と WebXR を組み合わせ、プロシージャルな太陽系を VR 空間に構築。カメラのリグ構成、コントローラーによる移動、透明度描画のバグ修正など、没入感を高めるための最適化プロセスを詳解。
[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」
[2026/3/19]

[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」

GLSLの4DノイズとDomain Warpingを用いて、木星の大赤斑、土星の環、天王星の垂直リング、海王星の大暗斑をプロシージャルに生成。InstancedMeshによる小惑星帯やOrbitControlsの拡張によるシネマティックなカメラ操作も実装し、ブラウザ上に生きた太陽系を完成させます。
[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期
[2026/3/18]

[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期

Next.js環境のフロントエンドで、GLSLを用いた美しい「惑星の環（Rings）」をプロシージャルに描画します。1Dフラクタルノイズによる微細な塵の表現と、外積（Cross Product）を活用して惑星本体とリングの影を同期させるFake Shadowの実装アプローチをまとめました。
[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築
[2026/3/17]

[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築

BlenderのCell Fractureアドオンによるオブジェクト分割から、Rapierを用いたパフォーマンス重視の物理演算スワップ、GLSLによる動的なノイズ床の実装までを解説します。
[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装
[2026/3/17]

[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装

Next.js環境下でThree.jsとGLSLを用いて、プロシージャルなオーロラを実装する方法を解説。ノイズのStretching、極地マスク、加算合成を用いた第3の球体（Aurora Sphere）の追加と、自然で神秘的なパラメータ調整のコツをまとめます。
[Next.js #42] Three.js HTMLMesh で既存の HTML UI を WebXR 空間へ移植
[2026/3/16]

[Next.js #42] Three.js HTMLMesh で既存の HTML UI を WebXR 空間へ移植

Three.js の HTMLMesh と InteractiveGroup を活用し、Quest 2 などの WebXR 環境で既存の HTML UI を操作可能にする方法を解説します。UI のモジュール化から VR コントローラーによる表示トグル、ファイル読み込みの制約回避まで。
[Next.js #41] Procedural Night Lights on Storm Planet — 昼夜境界を動かし、文明の灯りが浮かぶ惑星を描く
[2026/3/16]

[Next.js #41] Procedural Night Lights on Storm Planet — 昼夜境界を動かし、文明の灯りが浮かぶ惑星を描く

Three.js / GLSL で作った Storm Planet に Procedural Night Lights を実装。Voronoi Noise による都市の灯り、smoothstep による twilight 制御、uLightDir の uniform 化による可動 Terminator を組み合わせ、文明の光と昼夜の境界が動く惑星表現を解説します。
[Next.js #40] MMD Clock AI Talk — LM Studio × VOICEVOX × MMDで「会話する時計アプリ」を作る
[2026/3/15]

[Next.js #40] MMD Clock AI Talk — LM Studio × VOICEVOX × MMDで「会話する時計アプリ」を作る

Next.jsのMMD時計アプリに、LM StudioのローカルLLM、VOICEVOX、吹き出し表示、前方移動演出を統合し、キャラクターと会話できる仕組みを構築した実装記録です。
[Next.js #39] Procedural Lightning on Storm Planet — 球体惑星に雷を落とし、濃い雲でランダム発火させる
[2026/3/15]

[Next.js #39] Procedural Lightning on Storm Planet — 球体惑星に雷を落とし、濃い雲でランダム発火させる

Next.js連載第39回。前回の Interactive Storm を拡張し、球体惑星の雲レイヤーに Procedural Lightning を追加します。高周波ノイズと閾値処理で稲妻の形状を作り、時間ノイズで不規則なフラッシュを制御。さらに、マウスで発生させる台風だけでなく、雲の濃い領域でもランダムに雷が走るように調整し、生きた嵐の表現へ進化させます。
[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装
[2026/3/14]

[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装

今回は球体惑星の雲表現をさらに発展させ、マウス位置に応じて局所的な渦と乱流を発生させる Interactive Storm を実装します。Three.js の Raycaster で取得したワールド座標を shader に渡し、FBM / Curl Noise / Domain Warping / 球面接線ベクトル場を組み合わせることで、台風の目を持つ大規模な嵐表現を構築します。
【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する
[2026/3/13]

【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する

Three.js + MMD ベースの時計アプリに動画壁紙機能を追加。mp4 を drag & drop で IndexedDB に保存し、Wallpaper UI 下に一覧表示、クリックで無音ループ再生、localStorage 連携による起動時復元、動画サムネ生成までを実装した。
【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する
[2026/3/13]

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

Three.js + GLSL で作成したノイズ惑星を拡張し、Cloud Sphere による流体的な雲表現を追加。4D FBM によるアニメーション雲、地表への影フェイク、バイオーム地形との合成、GUI によるリアルタイム調整までをまとめた実装記事。
[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応
[2026/3/12]

[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

Three.js + MMD + IndexedDB ベースのWeb時計アプリに設定UIを追加。時計色、透明度、壁紙、床のシェーダーパラメータ、VMD/VPDの一覧管理とデフォルト設定を保存・復元できるようにした実装内容を紹介します。
[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える
[2026/3/12]

[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える

Three.js と GLSL で球体ノイズ地形にバイオームと大気散乱を実装。Next.js プロジェクトの public 配下で運用するほぼバニラ構成として、Height / Slope / Fresnel を組み合わせた惑星デモと、GUI による調整ポイントを整理します。
[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える
[2026/3/11]

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

Next.js プロジェクト内で運用しているほぼバニラ Three.js + GLSL 実装として、球体ノイズ地形とクリック波紋エフェクトを組み合わせたインタラクティブデモを作成。Next.js #31 の平面版からの発展と、Noise 入門 #32 の球体ノイズ実装を接続しながら、Raycaster による接触位置取得、球面法線ベースの波紋表現、背景スカイスフィアの追加までをまとめます。
[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備
[2026/3/10]

[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備

Three.jsベースのMMD / WebXRアプリに、モデルZIPの展開、PMX検出、Blob処理、IndexedDB保存、モデル一覧、壁紙サムネ一覧、削除UIを実装した開発記録。ローカルアセットをアプリ内で管理するための基盤整備をまとめる。
[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る
[2026/3/10]

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

Noise 入門の流れを踏まえ、Three.js × GLSL × Raycasterで“Touching Noise Field”を実装。マウスホバー位置を3D空間上に取得し、その周辺だけノイズの歪みと色変化を強めることで、インタラクティブなノイズ表現を作る。
[Next.js #30] Triplex + React Three Fiber + WebXR — GUI編集からQuest2実行まで
[2026/3/9]

[Next.js #30] Triplex + React Three Fiber + WebXR — GUI編集からQuest2実行まで

Triplexを使ってReact Three Fiberの3DシーンをGUIで編集し、そのままWebXRでMeta Quest2に送って体験するまでの流れを解説。R3FのXRプロトタイピングを高速化する開発フローを紹介。
[Three.js #29] Three.js + MMD を VR対応する — WebXRで躓いた点まとめ
[2026/3/8]

[Three.js #29] Three.js + MMD を VR対応する — WebXRで躓いた点まとめ

Next.js + Three.js + MMD の時計アプリを Quest 2 単体ブラウザ対応。HTTPS 起動、WebXR 実装、crypto.randomUUID 問題の回避、画面内ログ、frame.getViewerPose() を使った XR カメラ追従修正、Quest Browser 向け Tint Color UI 改修までをまとめます。
[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替
[2026/3/7]

[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替

Three.js製MMD時計アプリにWallpaperカスタマイズ機能を実装。背景壁を画像対応し、Tint Color、Texture ON/OFF、壁紙プリセット切替をUIから操作できるようにした。MeshStandardMaterial + map、onBeforeCompile、texture cache、状態管理、画面追従リサイズまで含めて整理。
[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認
[2026/3/7]

[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認

Three.js + MMD 構成のアプリに Rig パネルを実装し、Bone / Morph 一覧表示、検索、Morph Apply / Reset を追加した開発記録。Morph が効かないように見える原因を調査し、actor.root ではなく actor.mesh への適用で「ウィンク2右」などの表情変化を確認できた過程をまとめる。
[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装
[2026/3/6]

[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装

Three.js×MMD時計アプリに複数モデル表示を実装。actor配列による管理、モデル追加・削除UI、talk ON/OFF、lastTalkActorId と pickNextTalkActor を使った順番トーク制御の設計と実装をまとめる。
[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める
[2026/3/5]

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

Next.js×Three.js×MMDで作った3D時計に、上部ツールバー/右パネル/HUDを追加。UIが整った今こそフォント設計が効く。巨大な時刻表示、曜日/天気、HUD、パネルの階層を崩さず“作品っぽさ”を上げるためのフォント選定・スケール・letter-spacing・shadow・数字の見せ方と、CSS変数での管理方法を整理する。
[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）
[2026/3/4]

[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）

Next.js×Three.js×MMDで作った3D時計に、上部ツールバー/右パネル/HUDを追加。UIが整った今こそフォント設計が効く。巨大な時刻表示、曜日/天気、HUD、パネルの階層を崩さず“作品っぽさ”を上げるためのフォント選定・スケール・letter-spacing・shadow・数字の見せ方と、CSS変数での管理方法を整理する。
[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化
[2026/3/3]

[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化

Next.js×Three.jsで構築した3D時計に、MMD(PMX/VMD/VPD)のランダム歩行・ランダム会話・カメラ追従・ポーズ適用を統合。レスポンシブ床スケール、吹き出しCanvasスプライト、VMD停止制御、talk中のVPD適用など“キャラクターとして動く時計”に進化させた実装まとめ。
[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整
[2026/3/2]

[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整

Next.jsプロジェクトのpublic/index.htmlで孤立起動するThree.js時計を実装。ベベル付きジオメトリでアナログ時計、TextGeometryで3DデジタルUI、onBeforeCompileで壁にノイズ注入、EffectComposer+Bloom、lil-guiで露出/ライト/UI色/ノイズ/床シェーダをライブ調整。MMD(PMX)のロードと簡易歩行も添える。
[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海
[2026/3/1]

[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式 全方位カメラと無限の雲海

WebGLを使わずに、描画コンテキストの Translate・Scale・Rotate の順序を制御することで、2D座標系の中に奥行きと旋回感を生み出すテクニックを解説します。
[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現
[2026/3/1]

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

React Three Fiberでドメイン・ワーピング(Domain Warping)を実装し、有機的なうねりと虹色のスペクトル・カラーを表現する方法を解説。外部Bloomライブラリを使わず、GLSLのみで高輝度な発光を実現するテクニックも紹介。
[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化
[2026/2/17]

[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化

React Three FiberにおけるDirectionalLightのシャドウマップ設定の基本解説。Levaを用いたバイアスや解像度、カメラ範囲（Frustum）のリアルタイム調整と、トラブルシューティングの基礎について。
[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds
[2026/2/16]

[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds

React Three Fiber で自然環境を構築する実装解説。three/addons/objects/Water.js を extend して使用する方法、およびカスタムシェーダーで 3D FBM とレイマーチングを実装し、厚みのある雲を描画する手法を詳細に解説します。
[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する
[2026/2/15]

[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する

54要素の配列管理に挫折した状態から、物理空間での制御へとパラダイムシフト。R3Fの `attach` を用いた動的グループ化や、法線ベクトルと外積による直感的なドラッグ判定ロジックを詳解します。
[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する
[2026/2/14]

[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する

Next.js + React Three Fiberで、GLTFモデルを横にスライド切替できる3Dギャラリービューアを構築する。モデルごとのスケール差を吸収する正規化処理、Box3による接地、lerpによる滑らかな遷移、UIレイヤー分離設計を解説。
[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー
[2026/2/13]

[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー

Next.js + React Three Fiber を使い、InstancedMesh とカスタムシェーダーで 5万本の草を描画。GPUでの風アニメーション、FBMによる地形生成、疑似法線ライティングまで解説。
[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装
[2026/2/12]

[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装

Next.js + React Three Fiber で PMX（MMDモデル）をブラウザから動的読み込みし、歩行アニメ・地形 Raycast・3D UI メニューと統合するキャラチェンジ機能の解説。BlobURL と MMDLoader の相性問題、File API、MMDAnimationHelper、再レンダー対策など、複数テクノロジーを横断した実践的なまとめ。
[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築
[2026/2/11]

[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築

OBJモデルを粒子に変換し、GLSLで揺らぎアニメーションを付けて再構築する手法を Next.js 内で実装。PointCloud・ShaderMaterial・uniform 制御・インスペクタUI（lil-gui）など、WebGL表現の中核をまとめた記事。
[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整
[2026/2/11]

[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整

Next.js + React-Three-Fiber で構築した“世界”にインスペクタ機能を追加し、雲のスピード・色、ライト強度、地形スケール、水の揺らぎといったパラメータをリアルタイムに変更できるようにする。Leva の useControls、ShaderMaterial への uniforms 接続、UIが表示されない時の原因など実装上の罠も丁寧に解説。
[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合
[2026/2/10]

[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合

FBMノイズ地形の生成、円形のくぼみで作る湖、GLSLによる水面シェーダー（FBM波・深度色・縁フェード）、雲ドーム、Reflectorによる鏡面反射、プレイヤー移動まで統合し、Next.js × React-Three-Fiber で“世界づくり”を1つの記事にまとめた実装解説。
[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成
[2026/2/9]

[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成

Perlin / FBM ノイズで地形を作った前回に続き、R3F と GLSL を用いて雲が流れる SkyDome を構築します。FBM ノイズ、smoothstep、BackSide 描画を活用し、ゲーム空間の空を自作ノイズで描画する手法を詳しく解説します。
[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従
[2026/2/8]

[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

Next.js(App Router) + R3F 環境で、Perlin/FBM（フラクタルノイズ）を使った地形生成と、Raycaster による地面追従プレイヤー制御を実装する。PlaneGeometry の頂点変形・computeVertexNormals・vertexColors、KeyboardControls による移動、atan2 での回転補間、Raycast の hit 判定と LERP による安定化まで、ゲームエンジン的処理を Web 上で再現する。
[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理
[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 でキャラクターモデルを扱う際の正しい実装ルートを提示する。
[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ
[2026/2/7]

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

バニラThree.jsではglTFもVRMも実装済みの開発者向けに、React Three Fiberで同じ資産を扱うための“橋渡し部分”だけをまとめる。useGLTF・Suspense・再レンダー・VRMの内部構造がReactと衝突する問題点など、R3F特有の地雷と設計思想を端的に解説する。
[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法
[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 を構築する技術を分かりやすくまとめています。
[Next.js #05] App Router の“基本 UI 構造”を理解する：layout / page / component / client-server の境界
[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 の地面” を固めるための内容。
[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する
[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 と正しく統合するための設計・実装パターンを整理する。
[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する
[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 が低レイヤーを奪わないことも解説。
[Next.js #02] フレームワークの思想と哲学を理解する
[2026/2/1]

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

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

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

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