⚠ デモ/モックアプリ: このページはデータベースや認証機能を持たないデモ/モックです。学習・参考用コンテンツとしてご活用ください。より深く学びたい方は村瀬にご連絡いただくか、AIアシスタントにご相談ください。

3D Web Demos

Three.js / GLSL / WebGL2 で作るリアルタイム3Dビジュアル。10のデモを体験しよう。

Built with Claude Code + Three.js
パーティクルテキスト
15,000個のパーティクルが文字を形成。触ると散って再集合するバネ物理。
InstancedMesh + Bloom
🌊
ジェネレイティブフローアート
FBM + Domain Warping による有機的な流動パターン。フルスクリーンシェーダー。
GLSL Fullscreen
🔮
モーフィングスフィア
ノイズで変形する虹色の球体。触ると膨らむインタラクション。
Noise + Iridescence
💎
レイマーチド・クリスタル
SDF(符号付き距離関数)によるクリスタル構造。フェイク屈折 + イリデセンス。
SDF Raymarching
🌀
ネオントンネル
FBMで歪んだ無限トンネルをレイマーチング。マウスで速度・傾きを制御。
GLSL Raymarching
NEW
🎵
オーディオビジュアライザー
マイク入力の周波数で3Dリングバーが反応。Bloomエフェクト付き。
Three.js + Web Audio
NEW
🎨
フルイドペイント
GPU Navier-Stokes流体シミュレーション。タッチで描くインク風ペイント。
WebGL2 Fluid Sim
NEW
🏙️
ネオンシティ MIXI
サイバーパンク風の夜景に浮かぶ巨大MIXIネオンサイン。Bloom + 反射。
Three.js + Bloom
NEW
🌧️
雨粒シミュレーター
数千のパーティクルが降り注ぐリアルな雨。雷・スプラッシュ・風の制御。
Three.js + Web Audio
NEW
🌐
サイバーウェーブ
Synthwave風グリッドパーティクルが波のように動く。マウスで波紋が広がる。
Three.js + Custom Shader
NEW