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

2026-03-17 | lain

Blenderで分割したモデルをNext.js + R3F上で物理演算させ、幻想的に砕け散る演出を実装しました。

カテゴリ： Next.js

タグ： #3D Development#R3F#Three.js#Blender#Rapier#GLSL#Noise

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

2026-03-09 | lain

Triplexを使ってReact Three Fiberの3DシーンをGUIで編集し、そのままWebXRでMeta Quest2に送って体験するまでの流れを解説。インストールからXR実行までを実際の手順でまとめます。

カテゴリ： Next.js

タグ： #React Three Fiber#R3F#Triplex#Three.js#WebXR#Meta Quest#VR

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

2026-02-13 | lain

React Three Fiber で大量の草をGPUで描画する方法。InstancedMesh・シェーダー揺れ・FBM地形・疑似法線ライティングまで実装。

カテゴリ： Next.js

タグ： #R3F#Three.js#WebGL#Shader#InstancedMesh#GPU

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

2026-02-12 | lain

File API から PMX を読み込み、BlobURL 偽装（#filename.pmx）で MMDLoader を正常動作させ、R3F のプレイヤーに即反映する「キャラチェンジ」機能を実装。地形追従・歩行アニメ・3D UI と連携させて動くまでの技術的課題と解決策をまとめた記事。

カテゴリ： Next.js

タグ： #Three.js#R3F#MMD#PMX#Blob#FileAPI#JavaScript

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

2026-02-11 | lain

Next.js × React-Three-Fiber のシーンに Leva UI を統合し、雲ドーム・水シェーダー・ライト強度などをインスペクタからリアルタイムに調整できる仕組みを解説。ShaderMaterial の uniforms 制御、useControls の罠、UI配置の注意点までまとめた。

カテゴリ： Next.js

タグ： #Three.js#R3F#Shader#Leva#WebGL