インタラクティブ3D錦鯉池

Three.js + WebGLを使って、美しく全画面で楽しめるインタラクティブな錦鯉池を構築します。上空から見下ろす視点にし、透明感のあるターコイズ色の水面、 sunlight、池底で動くコースティクス、そして説得力のある奥行きを表現してください。 画面下部に、4種類の錦鯉（紅白、昭和三色、黄金、プラチナ）を選べる上品な半透明の選択パネルを配置します。カードをクリックすると、その魚が池に放流されます。カードから魚をドラッグすると、ユーザーが放流場所を正確に選べるようにします。 魚が着水する瞬間には、水しぶきと水滴、水面の一時的なくぼみ、広がる波紋を発生させ、気持ちよい手応えを感じられるようにします。その後、魚は水面下へ潜ります。屈折と奥行きの手がかりを使い、錦鯉が水中にいることがはっきり伝わるようにしてください。 目、うろこ、ひれ、流れるような尾を備えた、精細な3D錦鯉を作成します。体、尾、ひれが連動して動くようにアニメーションさせます。魚はそれぞれ独立して方向と速度を変え、境界付近では滑らかに方向転換し、ほかの魚を避けるようにします。 ユーザーが水面をタッチしてドラッグすると、波紋が発生するようにします。雨と、魚に流れの影響を与える移動可能な渦を追加します。「Calm」「Clear pond」と、画面録画用にインターフェースを非表示にするコントロールを用意してください。 Web Audioを使って、着水時の水しぶき、柔らかな音階の水滴、穏やかな泳ぎの水音、雨音、渦の音を作成します。「Sound」ボタンで音声を有効にし、ミュート時は滑らかにフェードアウトさせ、ブラウザのタブが非表示になったら一時停止してください。 すべてのラベルとボタンは英語にします。モバイル向けにレイアウトをレスポンシブ対応にします。数十匹の魚がいても滑らかに動作するよう、レンダリングとアニメーションを最適化してください。 ビジュアルを磨き込み、操作も機能する、完成度の高い動作可能なWebサイトとして仕上げます。