![[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化](https://humanxai.info/images/uploads/nextjs-19-r3f-shadow-map-leva.webp)
[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化
2026-02-17 | lain
影が出ない・切れるといった「あるある」を防ぐために。Levaを使ってDirectional LightのShadow Camera範囲を可視化し、最適な設定を探るプロセスをまとめました。
カテゴリ：Leva
![[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整](https://humanxai.info/images/uploads/nextjs-12-r3f-leva-inspector.webp)
[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整
2026-02-11 | lain
Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。