Build an interactive 3D jelly pufferfish (fugu) as a single self-contained HTML page using three.js from a CDN.
The fish is a soft-body gummy sitting on a table. Model the body as one closed icosphere-topology skin with two rest shapes per vertex: a calm fish (blunt round head, body tapering to a short tail stalk, slightly flattened belly) and a fully inflated ball (sphere with the same tail stalk sticking out). Blend between them with an "inflation" value. Simulate with XPBD at a fixed 1/600 s substep (frame-rate independent): edge-length constraints, a global volume constraint, a soft global shape-matching pull toward the blended rest shape (rotation via polar decomposition, gently leaning upright), ground collision with friction, and damping applied to the wobble (velocity relative to the body's mean) so it jiggles but settles in about a second. Render with one Loop-subdivision pass for a smooth surface.
Behaviour: tapping the fish startles it. It gulps air three times (mouth opens on each gulp, small overshoot) until it is a round ball, stays puffed about 4 seconds, then slowly deflates while blowing iridescent bubbles from its mouth. Dragging grabs and stretches the jelly locally; dragging empty space orbits the camera; wheel or pinch zooms.
Details: ~260 soft spines that lie flat and hidden when calm, pop up one by one (staggered) as it inflates, wobble on their own springs, bend against the table, and lift the ball so it stands on its spines. Big glossy eyes (gold-green iris, large pupil, white catchlight) that follow the cursor. Puckered lips with a tiny white beak. Translucent ray-striped fins: fluttering pectorals, swaying tail fan, rippling dorsal and anal fins, all faster when alarmed. Dark freckles on the back, pale belly, a few air bubbles trapped inside the jelly.
Look: MeshPhysicalMaterial with transmission, clearcoat and sheen for a candy-gummy look; a soft environment map; a soft colored shadow with a faint caustic on a floor that matches the page background. Flavour presets Yuzu, Ramune, Momo, Matcha. Editorial "Material Studies" layout: big italic serif title "Fugu Jelly.", a side panel with flavour swatches, Firmness and Wobble sliders, Startle / Calm / Reset buttons, ¼ speed and Sound toggles, and live readouts for volume, spine angle and mood. Synthesized WebAudio sounds for gulps, a boing on tap, a hiss while deflating and tiny bubble pops. Responsive down to phone width.
한국어 번역
CDN에서 가져온 three.js를 사용해 단일 자체 포함 HTML 페이지로 인터랙티브 3D 젤리 복어(후구)를 만들어라.
이 물고기는 테이블 위에 앉아 있는 소프트바디 구미다. 몸체는 닫힌 아이코스피어 토폴로지의 스킨 하나로 모델링하고, 각 정점마다 두 가지 휴지 형상을 둔다: 차분한 물고기(뭉툭한 둥근 머리, 짧은 꼬리 자루로 좁아지는 몸, 약간 납작해진 배)와 완전히 부푼 공(같은 꼬리 자루가 튀어나온 구체). "inflation" 값으로 둘 사이를 블렌딩한다. 고정 1/600 s 서브스텝(프레임 레이트 독립)으로 XPBD로 시뮬레이션한다: 변 길이 제약, 전역 부피 제약, 블렌딩된 휴지 형상 쪽으로 당기는 부드러운 전역 셰이프 매칭(극 분해를 통한 회전, 살짝 똑바로 기울어짐), 마찰이 있는 지면 충돌, 그리고 흔들림에 적용되는 감쇠(몸체 평균에 대한 상대 속도)로, 흔들리다가 약 1초 만에 안정된다. 매끄러운 표면을 위해 Loop 세분화를 한 번 적용해 렌더링한다.
동작: 물고기를 탭하면 놀란다. 세 번 공기를 들이마시며(들이마실 때마다 입이 열리고, 약간 오버슈트) 둥근 공이 될 때까지 부풀고, 약 4초 동안 부푼 채로 있다가, 입에서 무지갯빛 방울을 불면서 천천히 배출한다. 드래그하면 젤리를 국소적으로 잡아당겨 늘어나고, 빈 공간을 드래그하면 카메라가 궤도 회전하며, 휠이나 핀치로 줌한다.
디테일: 평소에는 납작하게 누워 숨겨진 약 260개의 부드러운 가시가 있다. 이 가시들은 부풀어 오르면서 하나씩(엇갈리게) 튀어오르고, 각자의 스프링으로 흔들리며, 테이블에 닿으면 휘고, 공을 들어 올려 가시 위에 서게 한다. 커서를 따라가는 크고 광택 있는 눈(금록색 홍채, 큰 동공, 흰 캐치라이트). 작은 흰 부리가 있는 오므린 입술. 반투명한 광선 줄무늬 지느러미: 팔랑이는 가슴지느러미, 흔들리는 꼬리 부채, 물결치는 등지느러미와 뒷지느러미, 놀랐을 때는 모두 더 빨라진다. 등에는 짙은 주근깨, 배는 옅고, 젤리 안에 갇힌 몇 개의 기포.
룩: 캔디 구미 느낌을 위해 transmission, clearcoat, sheen이 적용된 MeshPhysicalMaterial; 부드러운 환경 맵; 페이지 배경과 일치하는 바닥 위에 옅은 코스틱이 깃든 부드러운 컬러 그림자. 플레이버 프리셋 Yuzu, Ramune, Momo, Matcha. 에디토리얼 "Material Studies" 레이아웃: 큰 이탤릭 세리프 제목 "Fugu Jelly.", 플레이버 스와치가 있는 사이드 패널, Firmness 및 Wobble 슬라이더, Startle / Calm / Reset 버튼, ¼ 속도 및 Sound 토글, 그리고 볼륨, 가시 각도, 무드의 실시간 판독값. 꿀꺽 마시는 소리, 탭할 때의 보잉 소리, 배출 중의 쉬익 소리, 작은 방울 톡톡 소리를 위한 합성 WebAudio 사운드. 휴대폰 너비까지 반응형.
