Build a beautiful, full-screen interactive koi pond using Three.js + WebGL. Use a top-down view with clear turquoise water, sunlight, animated caustics on the pond floor, and a convincing sense of depth.
Place an elegant translucent selection panel at the bottom with four koi varieties: Kohaku, Showa, Golden Ogon, and Platinum. Clicking a card releases that fish into the pond. Dragging a fish from its card lets the user choose exactly where to drop it.
Make each landing feel satisfying: a splash with droplets, a brief depression in the water surface, and expanding ripples. The fish should then dive beneath the surface. Use refraction and depth cues so the koi clearly look submerged.
Create detailed 3D koi with eyes, scales, fins, and flowing tails. Animate their bodies, tails, and fins together. Each fish should independently change direction and speed, turn smoothly near boundaries, and avoid other fish.
Let users touch and drag across the water to create ripples. Add rain and a movable whirlpool whose current affects the fish. Include Calm, Clear pond, and a control to hide the interface for screen recording.
Use Web Audio to create landing splashes, soft musical droplets, gentle swimming water sounds, rain, and a whirlpool sound. Enable audio through a Sound button, fade it smoothly when muted, and pause it when the browser tab is hidden.
Keep all labels and buttons in English. Make the layout responsive for mobile. Optimize rendering and animation for smooth performance with several dozen fish.
Deliver a complete, working website with polished visuals and functional interactions.
한국어 번역
Three.js + WebGL로 아름답고 전체 화면인 인터랙티브 잉어 연못을 만드세요. 맑은 터쿼이즈색 물, 햇빛, 연못 바닥에서 애니메이션되는 코스틱, 설득력 있는 깊이감이 있는 탑다운 뷰를 사용하세요.
하단에 네 가지 잉어 품종(Kohaku, Showa, Golden Ogon, Platinum)이 있는 우아하고 반투명한 선택 패널을 배치하세요. 카드를 클릭하면 해당 물고기가 연못으로 풀려납니다. 카드에서 물고기를 드래그하면 사용자가 떨어뜨릴 위치를 정확히 선택할 수 있습니다.
물고기가 착수할 때마다 만족스러운 느낌을 주세요: 물방울이 튀는 스플래시, 수면이 잠시 움푹 들어가는 것, 퍼져 나가는 물결. 그런 다음 물고기는 수면 아래로 잠수해야 합니다. 굴절과 깊이 단서를 사용해 잉어가 물속에 있는 것이 분명하게 보이도록 하세요.
눈, 비늘, 지느러미, 흐르는 꼬리가 있는 정교한 3D 잉어를 만드세요. 몸통, 꼬리, 지느러미를 함께 애니메이션하세요. 각 물고기는 독립적으로 방향과 속도를 바꾸고, 경계 근처에서 부드럽게 방향을 틀고, 다른 물고기를 피해야 합니다.
사용자가 물 위를 터치하고 드래그해 물결을 만들 수 있게 하세요. 비와, 흐름이 물고기에 영향을 주는 이동식 소용돌이를 추가하세요. Calm, Clear pond, 그리고 화면 녹화를 위한 인터페이스 숨기기 컨트롤을 포함하세요.
Web Audio를 사용해 착수 스플래시, 부드럽고 음악적인 물방울 소리, 잔잔하게 헤엄치는 물소리, 비, 소용돌이 소리를 만드세요. Sound 버튼으로 오디오를 활성화하고, 음소거하면 부드럽게 페이드하며, 브라우저 탭이 숨겨지면 일시정지하세요.
모든 라벨과 버튼은 영어로 유지하세요. 모바일에서 반응형으로 레이아웃되게 하세요. 수십 마리의 물고기로도 부드럽게 작동하도록 렌더링과 애니메이션을 최적화하세요.
세련된 비주얼과 실제로 작동하는 인터랙션을 갖춘 완성된 웹사이트를 제공하세요.
