Etkileşimli 3B Koi Göleti

Three.js + WebGL kullanarak güzel, tam ekran ve etkileşimli bir koi göleti oluşturun. Yukarıdan görünüm kullanın; berrak turkuaz su, güneş ışığı, gölet tabanında hareketli ışık kırınımları ve inandırıcı bir derinlik hissi sağlayın. Alta, dört koi çeşidinin yer aldığı zarif ve yarı saydam bir seçim paneli yerleştirin: Kohaku, Showa, Golden Ogon ve Platinum. Bir karta tıklamak, ilgili balığı gölete bırakır. Kullanıcı, balığı kartından sürükleyerek tam olarak nereye bırakacağını seçebilsin. Her iniş tatmin edici hissettirsin: su sıçraması ve damlacıklar, su yüzeyinde kısa süreli bir çökme ve dışa doğru yayılan su halkaları oluşturun. Balık daha sonra su yüzeyinin altına dalsın. Koi balıklarının gerçekten suya batmış görünmesi için kırılma efektleri ve derinlik ipuçları kullanın. Gözleri, pulları, yüzgeçleri ve akışkan kuyrukları olan ayrıntılı 3B koi balıkları oluşturun. Gövdelerini, kuyruklarını ve yüzgeçlerini birlikte canlandırın. Her balık yönünü ve hızını bağımsız olarak değiştirsin, sınırlara yaklaştığında yumuşakça dönsün ve diğer balıklardan kaçınsın. Kullanıcıların su üzerinde dokunup sürükleyerek su halkaları oluşturmasını sağlayın. Yağmur ve hareket ettirilebilen, akıntısı balıkları etkileyen bir girdap ekleyin. Calm, Clear pond seçeneklerini ve ekran kaydı için arayüzü gizleyen bir kontrolü ekleyin. İniş sırasındaki su sıçramalarını, yumuşak melodik damlacık seslerini, hafif yüzme suyu seslerini, yağmuru ve girdap sesini oluşturmak için Web Audio kullanın. Sound düğmesiyle sesi etkinleştirin, sessize alındığında sesi yumuşakça kısın ve tarayıcı sekmesi gizlendiğinde sesi duraklatın. Tüm etiket ve düğmeleri İngilizce tutun. Yerleşimi mobil cihazlara uyumlu hâle getirin. Birkaç düzine balıkla bile akıcı performans sağlamak için oluşturma ve animasyonu optimize edin. Görsel açıdan özenli ve etkileşimleri işlevsel, eksiksiz ve çalışır durumda bir web sitesi teslim edin.