波紋・雨・渦を操作できる真上視点のインタラクティブ錦鯉池

GPT-6 AstraがThree.jsでブラウザの錦鯉池を制作。鯉を選んで放ち、雨や渦、カーソルで水面をかき乱せる。

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は Wandy 2。

精細な3Dモデルを作ろう

コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。

Wandy3Dによる制作ブリーフ

作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。

Build an interactive koi pond as a single web page using Three.js and WebGL. Show the pond from directly above: turquoise water with animated caustic light patterns on a tiled pool floor. Add a small floating panel at the bottom where the visitor picks one of four koi varieties, such as orange-white, white, golden and dark-spotted. Clicking the water drops the chosen fish in: a splash appears, turns into expanding ripples, and the koi dives and then swims on its own with smooth, natural body motion and avoidance of other fish. Add water interactions: a rain mode with droplets, a whirlpool that pulls fish and water into a spiral, and ripples that follow the cursor as it moves through the water. Add soft synthesized sounds for splashes, droplets and gentle water ambience, with a mute control. Done means many fish can swim together smoothly in the browser, and every interaction visibly disturbs the water surface.

このプロンプトの使い方

  1. コーディングツールのGPT-6 Astraにビルド概要を渡し、Three.jsの1ページを依頼します。

  2. 鯉の品種、水の色、底のタイル、パネルに置く効果を好みに変更します。

  3. ブラウザで開いて水しぶきと音を確認し、品種や動きの追加を依頼して改良します。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください