Three.js

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

2026-02-08 | lain

R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成（頂点Z変形・法線再計算・標高カラー）から、WASD移動＋atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。

カテゴリ： Next.js

タグ： #R3F#Three.js#Noise#Perlin#FBM#Raycast#Terrain#MMD#WebGL

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

2026-02-08 | lain

VRM・BVH・PMX を Next.js(App Router) + React Three Fiber で扱う際の互換性、使用すべきバージョン、正しいローダー構成、そして避けるべき組み合わせを整理する技術ドキュメント。

カテゴリ： Next.js

タグ： #R3F#Three.js#VRM#BVH#PMX#MMD#WebGL

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

2026-02-07 | lain

Three.jsを理解している前提で、R3FでglTF/VRMを扱うための本質だけをまとめる。Three.jsとR3Fの思想の違い、glTF読込みの仕組み、VRM特有の落とし穴、モデルビューアー設計の基礎を効率的に整理する。

カテゴリ： Next.js

タグ： #ReactThreeFiber#glTF#VRM#Three.js#React

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

2026-02-06 | lain

Next.js で DOM・2D Canvas・3D Canvas（R3F）を3層構造で扱うための設計パターンを解説します。ゲームUIやインタラクティブな Web 表現に必須となる多段キャンバス構造の実装方法をまとめました。

カテゴリ： Next.js

タグ： #React#R3F#Three.js#Canvas#WebGL

[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 と正しく統合する

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