カテゴリ：Next.js

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

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

2026-03-07 | lain

MMD時計アプリの背景壁を単色から画像対応へ拡張し、Wallpaper UIから壁紙・Tint Color・Texture ON/OFFを切り替えられるようにした実装メモ。Three.jsのMeshStandardMaterialに画像テクスチャを適用しつつ、onBeforeCompileで既存シェーダー演出も維持。さらに画面サイズに応じて背景壁が追従するようリサイズ処理も追加した。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#Wallpaper#Shader#Texture#WebGL

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

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

2026-03-07 | lain

Three.js + MMD の時計アプリに Rig パネルを追加し、Bone / Morph 一覧表示、検索、Morph の Apply / Reset を実装。Morph が効かない原因を UI 上で切り分けながら、actor.mesh への適用で表情変化を確認できるようにした記録。

カテゴリ： Next.js

タグ： #Three.js#MMD#PMX#Morph Target#UI#Rig#デバッグ

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

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

2026-03-06 | lain

Next.js×Three.js×MMDで作った3D時計に、複数MMDモデルの同時表示と actor ベース管理を導入。MMDAnimationHelper の個別化、UIからのモデル追加・削除、talkトグル、複数キャラを1人ずつ順番に喋らせる制御までを整理する。

カテゴリ： Next.js

タグ： #Next.js#Three.js#MMD#UI#JavaScript

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

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

2026-03-05 | lain

3D時計UIは“レイアウト”より先に“文字”で完成度が決まる。巨大な時刻表示・HUD・右パネルを崩さず、数字/曜日/天気を作品っぽく整えるフォント設計とCSS変数の管理をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#Typography#UI#CSS

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

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

2026-03-04 | lain

3D時計（Next.js×Three.js×MMD）にUIパネルを実装したので、次は“フォントで仕上げる”。数字・曜日・HUD・パネルを統一するためのタイポグラフィ方針、サイズ階層、文字間、影、可読性、そしてCSS変数による運用をまとめる。

カテゴリ： Next.js

タグ： #Three.js#MMD#UI#Typography#CSS#DOM

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

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

2026-03-03 | lain

Three.jsの3D時計 UI に、MMDキャラクターのランダム歩行・ランダム会話・VPDポーズ連動を追加し、動的なデスクトップマスコットのように進化させる実装手順。

カテゴリ： Next.js

タグ： #Three.js#MMD#PMX#VMD#VPD#WebGL#JavaScript#3D UI

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

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

2026-03-02 | lain

Three.jsで3Dアナログ時計＋3Dデジタルパネルを構築し、onBeforeCompileの背景ノイズとlil-guiのインスペクターで光・色・ノイズ・床を即時調整できるWEB時計を作る。MMD(PMX)歩行はおまけ。

カテゴリ： Next.js

タグ： #Three.js#WebGL#Shader#lil-gui#MMD

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

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

2026-03-01 | lain

Canvas 2Dの座標変換を駆使し、自機を中心に世界が回転・ズームする3D的なカメラワークと、決定論的ノイズによる無限の背景生成を実装した実験記録。

カテゴリ： Next.js

タグ： #Canvas2D#決定論的ノイズ#プロシージャル生成#ゲーム開発#数学

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

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

2026-03-01 | lain

ノイズ連載21回分の集大成。ドメイン・ワーピングとカスタムシェーダーを組み合わせ、ライブラリ不要の爆発的な視覚エフェクトを実装します。

カテゴリ： Next.js

タグ： #React Three Fiber#GLSL#Noise#Three.js#Web Graphics