[Next.js #12] R3Fに“インスペクタ”を付ける:Levaで雲・水・ライトをリアルタイム調整
2026-02-11 | lain
Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。
「AIと人が、共に学び、創る場所」
学びと再出発の旅路へ。
2026-02-11 | lain
Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。
2026-02-10 | lain
FBMノイズで生成した地形を“くぼませて湖を作る”実装を解説。水面のFBM波シェーダー、雲ドーム、Reflector鏡面エフェクト、プレイヤー移動まで統合した“ひとつの世界”をR3Fで構築する。
2026-02-10 | lain
Perlin・Simplex・FBM すべてに共通する“ノイズの設計パラメータ”を体系的に理解する回。周波数・振幅・オクターブ・ラキュナリティ・ゲインの5要素を押さえることで、ノイズの世界が一気に読み解けるようになる。
2026-02-09 | lain
Perlin・Simplex に共通する“ノイズの根本数学”。グリッド、勾配ベクトル、内積、補間、frequency・amplitude の基礎を徹底的に整理する回。
2026-02-09 | lain
R3F × GLSL で FBM ノイズを使った “動く雲の SkyDome” を実装し、地形に続いて空を生成する方法を解説します。
2026-02-08 | lain
R3F(React Three Fiber) 上で FBM ノイズ地形を生成し、Raycaster で地面の高さを取得してプレイヤーを自然に追従させる。地形生成(頂点Z変形・法線再計算・標高カラー)から、WASD移動+atan2回転、hit安全処理とLERP補間までを最小構成でまとめる。
2026-02-08 | lain
ゲーム開発・CG制作で使われる“ノイズ”の正体を、ランダムとの違いから基礎レベルで理解する。Perlin/Simplex 以前に知るべき核となる概念を解説。
2026-02-08 | lain
VRM・BVH・PMX を Next.js(App Router) + React Three Fiber で扱う際の互換性、使用すべきバージョン、正しいローダー構成、そして避けるべき組み合わせを整理する技術ドキュメント。
2026-02-07 | lain
Three.jsを理解している前提で、R3FでglTF/VRMを扱うための本質だけをまとめる。Three.jsとR3Fの思想の違い、glTF読込みの仕組み、VRM特有の落とし穴、モデルビューアー設計の基礎を効率的に整理する。