Интерактивная 3D-рыба фугу из желе на столе в three.js: мягкое тело переходит от спокойной формы к раздутой, всё в одном HTML

Промпт

Создайте интерактивную 3D-желейную рыбу-фугу (fugu) как единую автономную HTML-страницу, используя three.js из CDN.

Рыба — это мягкое желе, сидящее на столе. Тело моделируется как одна замкнутая топологическая поверхность икосферы с двумя формами покоя на вершину: спокойная рыба (тупая круглая голова, тело сужается к короткому хвостовому стеблю, слегка приплюснутое брюхо) и полностью надутый шар (сфера с тем же торчащим хвостовым стеблем). Смешивание между ними с помощью значения "инфляция". Симуляция с XPBD с фиксированным подшагом 1/600 с (независимо от частоты кадров): ограничения длины ребер, глобальное ограничение объема, мягкое глобальное притяжение к смешанной форме покоя (вращение через полярную декомпозицию, легкий наклон вверх), столкновение с землей с трением и демпфирование, применяемое к колебаниям (скорость относительно среднего значения тела), так что оно подпрыгивает, но оседает примерно за секунду. Рендеринг с одним проходом субдивизии по Лупу для гладкой поверхности.

Поведение: нажатие на рыбу пугает ее. Она трижды глотает воздух (рот открывается при каждом глотке, небольшое перерегулирование), пока не станет круглым шаром, остается надутой около 4 секунд, затем медленно сдувается, выпуская радужные пузырьки изо рта. Перетаскивание захватывает и растягивает желе локально; перетаскивание пустого пространства вращает камеру; колесико или щипок масштабирует.

Детали: ~260 мягких шипов, которые лежат плоско и скрыты в спокойном состоянии, появляются один за другим (ступенчато) по мере надувания, колеблются на собственных пружинах, изгибаются о стол и поднимают шар, так что он стоит на шипах. Большие глянцевые глаза (золотисто-зеленая радужка, большой зрачок, белые блики), которые следят за курсором. Сжатые губы с крошечным белым клювом. Полупрозрачные плавники с лучевыми полосами: трепещущие грудные, покачивающийся хвостовой веер, рябящие спинной и анальный плавники, все быстрее при испуге. Темные веснушки на спине, бледное брюхо, несколько пузырьков воздуха, застрявших внутри желе.

Вид: MeshPhysicalMaterial с пропусканием, прозрачным покрытием и блеском для вида конфетного желе; мягкая карта окружения; мягкая цветная тень с слабым каустиком на полу, соответствующем фону страницы. Пресеты вкусов Yuzu, Ramune, Momo, Matcha. Редакционная компоновка "Material Studies": большой курсивный шрифт с засечками "Fugu Jelly.", боковая панель с образцами вкусов, ползунки Firmness и Wobble, кнопки Startle / Calm / Reset, переключатели ¼ скорости и Sound, а также живые индикаторы громкости, угла наклона шипов и настроения. Синтезированные звуки WebAudio для глотков, буинга при касании, шипения при сдувании и крошечных хлопков пузырьков. Адаптивный до ширины телефона.

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.