Интерактивная 3D-игрушка на Three.js: арбуз сжимается резинками в песочные часы и в какой-то момент лопается

Промпт

Создай «The Watermelon Test»: интерактивную 3D-игрушку в HTML, состоящую из одного файла. Полосатый арбуз лежит на тёплом бежевом полу; каждое нажатие обматывает его ещё одной резинкой, фрукт сжимается, приобретая форму песочных часов, а в какой-то момент лопается. Предоставь полностью рабочий HTML, а не макет или фрагмент кода.

СЦЕНА И ВИЗУАЛЬНЫЙ СТИЛЬ
- WebGL через Three.js (встроенный в код или подключённый с CDN с фиксированной версией). Никаких файлов изображений или аудио. Google Fonts — единственный внешний ресурс.
- Тёплый студийный вид: фон страницы — мягкий радиальный градиент от #f4f0e8 (в центре) до #e6dfd3 (по краям). Поверх него — прозрачный canvas. Пол используется только для приёма теней, под фруктом должно быть мягкое пятно контактной тени. Один ключевой источник света сверху справа с мягкими тенями PCF, тёплый заполняющий свет, полусферический свет и лёгкое окружение помещения для отражений. Нейтральный tone mapping, чтобы зелёные цвета оставались чистыми.
- Камера наклонена примерно на 23 градуса вниз, FOV 28 градусов. Масштабируй сцену так, чтобы фрукт занимал около 55% ширины на телефоне в портретной ориентации и около 40% высоты на десктопе.

ТИПОГРАФИКА
- Заголовок "THE WATERMELON TEST" — очень широкий жирный гротеск в верхнем регистре, с увеличенным трекингом (Archivo, ширина 125%). Подзаголовок "How much pressure can it take?" — лёгкий курсивный шрифт с засечками (Newsreader). Небольшие моноширинные подписи (JetBrains Mono, увеличенное межбуквенное расстояние). Крупный курсивный шрифт с засечками для финального экрана (Instrument Serif). Цвет чернил #1d1a16, акцентный красный #d2404c. Заголовок в левом верхнем углу, кнопки RESET и SOUND с небольшими линейными иконками — в правом верхнем углу, HUD — внизу по центру.

АРБУЗ
- Поверхность яйцевидной формы, полученная вращением профиля, длиной около 2 единиц, с максимальным радиусом 0.74; правый конец немного уже. Пересобирай его вершины и нормали на CPU каждый кадр по профилю радиуса, чтобы он мог сжиматься.
- Процедурный шейдер корки, управляемый исходной позицией каждой вершины, чтобы полосы оставались приклеенными к фрукту при деформации: около 15 волнистых тёмно-зелёных полос (диапазон #265c33) на бледно-зелёном слегка неоднородном фоне (диапазон #aed087), с мягкими краями полос, мелкой зернистостью в качестве bump-карты, полосы сходятся к тёмному полюсу на каждом конце, восковое покрытие clearcoat.
- При загрузке он падает сверху с отскоком и сжатием, а затем останавливается. Перетаскивание свободно вращает его по инерции (в стиле trackball). Поддерживай мышь и сенсорный ввод.

РЕЗИНОВЫЕ КОЛЬЦА
- Нажатие на фрукт добавляет одно кольцо в месте нажатия вдоль его продольной оси; нажатия в других местах ничего не делают. Игнорируй нажатия, которые были перетаскиваниями. Пробел или Enter также добавляют кольцо. При наведении курсора на фрукт курсор меняется. Каждое нажатие показывает короткое расширяющееся кольцо в точке указателя (контур цвета загара).
- Кольца представляют собой тонкие плоские ленты (шириной около 0.04–0.056), прилегающие к деформированной поверхности; каждое наклонено на 1.5–12 градусов в случайном направлении, чтобы они пересекались. Новое кольцо начинается примерно в 1,5 раза больше нужного размера и с пружинным перелётом защёлкивается на фрукте.
- Кольца скользят по поверхности и собираются в пучок вокруг своего центроида. Ширина пучка примерно равна (0.22 + 0.0058 x N) в исходных единицах. Каждое кольцо располагается на немного отличающемся радиальном слое.
- Цвет меняется от цвета загара (#d9a66a) к кремовому (#f6e9cc) по мере роста давления; сильнее всего — в середине пучка, со случайными вариациями, чтобы были видны оба оттенка.
- Глубина сжатия D = 0.60 x (N/65)^1.15 сжимает фрукт вокруг пучка (при примерно 53 кольцах талия составляет около половины диаметра концов), а концы слегка выпирают. Каждое нажатие добавляет небольшой пружинный импульс. После примерно 40 колец добавь лёгкую дрожь.

HUD
- "BANDS:" со счётчиком (красный после добавления хотя бы одного кольца), подпись, меняющаяся с быстрым затуханием, и тонкая линия прогресса, заполняющаяся на N/65 и становящаяся красной при 40 и более кольцах.
- Подписи: 0 "Tap the watermelon to add pressure", 1+ "Everything seems fine.", 13+ "Probably still fine.", 28+ "Bro is under pressure.", 40+ "This feels irresponsible.", 49+ "Maybe stop."

РАЗРЫВ
- В каждом раунде случайным образом выбирай количество колец для разрыва от 50 до 62. На последнем кольце: 0.34 с сильного напряжения (тряска, кольца белеют), затем фрукт лопается. Спрячь фрукт, встряхни камеру и создай обломки с физикой твёрдых тел:
- 7 рваных изогнутых фрагментов корки (полосатая зелёная внешняя сторона, бледно-зелёный переходящий в белый край, внутренняя часть с мякотью, переходящей от белой по краям к кораллово-розовой),
- 15 гранёных низкополигональных кусочков красной мякоти разного размера, с плоским затенением,
- около 26 плоских глянцевых чёрных семечек,
- резиновые кольца в виде вьющихся прядей и свободных петель,
- около 130 маленьких розовых капель, которые при падении превращаются на полу в плоские полупрозрачные розовые брызги-декали.
- Физика обломков: гравитация, точки контакта с полом с импульсом и трением, упругость, демпфирование, переход в состояние покоя после остановки. Удерживай частицы в пределах видимой области пола, при этом некоторые из них должны обрезаться краями экрана.
- Примерно через 1,9 с плавно покажи по центру оверлей: крупное курсивное "Well…", небольшую моноширинную строку "53 BANDS." с числом красного цвета и чёрную кнопку "DO IT AGAIN". Спрячь HUD. RESET и DO IT AGAIN начинают новый раунд с новым случайным порогом.

ЗВУК (процедурный Web Audio, без файлов)
- Создавай аудиоконтекст только после первого пользовательского жеста. Кнопка SOUND переключает его состояние (по умолчанию включён), иконка показывает состояние отключения звука.
- Щелчок кольца: короткий отфильтрованный шумовой клик, треугольный звук "twang" с понижением высоты тона (высота тона повышается с ростом давления) и глухой низкий удар; каждый раз добавляй небольшую случайную вариацию.
- Время от времени после примерно 30 колец добавляй медленный тихий скрип.
- Разрыв: низкочастотный удар, шумовой треск, влажные шлепки и шквал щелчков колец. Мягкие глухие удары при падении обломков, с ограничением частоты.
- Ограничивай количество одновременно звучащих голосов и отключай каждый узел после завершения его работы.

КАЧЕСТВО
- Работает на десктопе и телефоне (в портретной и альбомной ориентации), pixel ratio ограничен значением 2, горизонтальная прокрутка отсутствует, боковые отступы — не менее 16px. Пропускай пересборку геометрии, если ничего не движется. Показывай запасное сообщение, если WebGL недоступен. Добавь видимые состояния фокуса и aria labels для кнопок и canvas. Только реальный контент, без заполнителей.

Create "The Watermelon Test": a single-file interactive 3D toy in HTML. A striped watermelon sits on a warm beige floor; each tap wraps another rubber band around it, the fruit squeezes into an hourglass, and at some point it bursts. Deliver the full working HTML, not a mockup or code fragment. STAGE AND LOOK - WebGL via Three.js (bundled inline or pinned from a CDN). No image or audio files. Google Fonts are the only external resource. - Warm studio look: page background is a soft radial gradient from #f4f0e8 (centre) to #e6dfd3 (edges). Transparent canvas over it. Floor is a shadow-catcher only, plus a soft contact-shadow blob under the fruit. One key light from above-right with soft PCF shadows, a warm fill light, a hemisphere light, and a subtle room environment for reflections. Neutral tone mapping so the greens stay clean. - Camera pitched about 23 degrees down, 28 degree FOV. Size the scene so the fruit is about 55% of the width on a portrait phone and about 40% of the height on desktop. TYPOGRAPHY - Title "THE WATERMELON TEST" in an extra-wide bold grotesque, all caps, tracked (Archivo at 125% width). Subtitle "How much pressure can it take?" in a light italic serif (Newsreader). Small mono labels (JetBrains Mono, wide letter-spacing). Big italic display serif for the end screen (Instrument Serif). Ink #1d1a16, accent red #d2404c. Top-left title, top-right RESET and SOUND buttons with small line icons, bottom-centre HUD. THE WATERMELON - Egg-shaped surface of revolution about 2 units long, max radius 0.74, right end slightly narrower. Rebuild its vertices and normals on the CPU every frame from a radius profile, so it can pinch. - Procedural rind shader driven by each vertex's rest position, so stripes stay glued to the fruit while it deforms: about 15 wavy dark-green stripes (#265c33 range) on pale, slightly mottled green (#aed087 range), soft stripe edges, fine grain as a bump, stripes converging into a dark pole at each end, waxy clearcoat. - On load it drops from above with a bounce and a squash, then rests. Dragging rotates it freely with inertia (trackball style). Mouse and touch. RUBBER BANDS - Tap on the fruit adds one band at the tapped position along its long axis; taps elsewhere do nothing. Ignore taps that were drags. Also Space or Enter adds a band. Hover cursor changes over the fruit. Each tap shows a short expanding ring at the pointer (tan outline). - Bands are thin flat ribbons (width about 0.04 to 0.056) that hug the deformed surface, each tilted 1.5 to 12 degrees in a random direction so they cross. A new band starts about 1.5x too large and snaps onto the fruit with a spring overshoot. - Bands slide along the surface and stack into a bundle around their centroid. Bundle width about (0.22 + 0.0058 x N) in rest units. Each band sits at a slightly different radial layer. - Colour goes from tan (#d9a66a) toward cream (#f6e9cc) as pressure rises, strongest in the middle of the bundle, with random variation so you see both. - Squeeze depth D = 0.60 x (N/65)^1.15 pinches the fruit around the bundle (waist about half the end diameter near 53 bands), with the ends bulging slightly. Every tap adds a small spring kick. Above about 40 bands add a faint tremble. HUD - "BANDS:" with the count (red once above 0), a caption that changes with a quick fade, and a thin progress line that fills N/65 and turns red at 40 or more. - Captions: 0 "Tap the watermelon to add pressure", 1+ "Everything seems fine.", 13+ "Probably still fine.", 28+ "Bro is under pressure.", 40+ "This feels irresponsible.", 49+ "Maybe stop." BURST - Each round picks a random burst count between 50 and 62. On the last band: 0.34 s of violent tension (shake, bands whiten), then it bursts. Hide the fruit, shake the camera, and spawn rigid-body debris: - 7 jagged curved rind shells (striped green outside, pale green-to-white edge, flesh inside fading from white at the rim to coral pink), - 15 faceted low-poly red flesh chunks of varied size, flat shaded, - about 26 flat glossy black seeds, - the rubber bands as curly strands and loose loops, - about 130 small pink droplets that turn into flat translucent pink splat decals on the floor when they land. - Debris physics: gravity, contact points against the floor with impulse and friction, restitution, damping, sleeping when still. Keep pieces inside the visible floor area, with some cropped at the screen edges. - After about 1.9 s fade in a centred overlay: huge italic "Well…", a small mono line "53 BANDS." with the number in red, and a black "DO IT AGAIN" button. Hide the HUD. RESET and DO IT AGAIN start a new round with a new random threshold. SOUND (procedural Web Audio, no files) - Create the audio context only after the first user gesture. SOUND button toggles it (on by default), icon shows muted state. - Band snap: a short filtered noise click, a triangle "twang" dropping in pitch (pitch rises with pressure), and a dull low thump; small random variation each time. - A slow, quiet creak now and then once past about 30 bands. - Burst: sub thump, noise crack, wet splats, and a flurry of band snaps. Soft thuds when debris lands, rate limited. - Limit simultaneous voices and disconnect every node when it ends. QUALITY - Works on desktop and phone (portrait and landscape), pixel ratio capped at 2, no horizontal scroll, side gutters at least 16px. Skip geometry rebuilds when nothing is moving. Fallback message if WebGL is unavailable. Visible focus states and aria labels on the buttons and canvas. Real content only, no placeholders.