Интерактивная 3D-анимация открытия сундука в мобильной игре с поэтапным улучшением визуальных эффектов и звука

Промпт

ПРОМПТ:
Помоги мне сделать оригинальный эффект «高光时刻» для мобильной игры: [основной объект, например: открытие сундука / повышение ранга / разблокировка достижения / выпадение предмета из Boss / повышение уровня персонажа].
Сделай это в виде одностраничного файла, который можно открыть напрямую (HTML + CSS + JS): полное воспроизведение должно запускаться по одному клику, а эффект должен соответствовать уровню коммерческой мобильной игры — сцене завершения / демонстрации награды.

【Мир и стиль】
- Оригинальный визуальный стиль, без имитации IP, персонажей или Logo существующих игр.
- Стиль мультяшной мобильной игры: высоконасыщенная палитра, единая тёмная обводка (например, #1A1033), округлые массивные формы.
- Палитра меняется с повышением уровня: [уровни, например: обычный зелёный → редкий синий → эпический фиолетовый → легендарный золотой]. При каждом повышении уровня должны меняться основной цвет, цвет световых эффектов и оттенок фона.
- Для заголовка используй округлый пухлый игровой шрифт (например, Titan One / Lilita One), добавь чёрную обводку и тень; буквы должны поочерёдно «впрыгивать» в кадр с отскоком.

【Основной объект: настоящий 3D】
- Создай модель с помощью Three.js, не используй плоские SVG-текстуры. Добавь толщину, фаски и структурные детали, соответствующие объекту (стыки деревянных досок, заклёпки, окантовку, грани драгоценных камней, застёжки и т. д.); такие детали, как стыки досок, должны быть собраны из настоящей геометрии, а не нарисованы чёрными линиями.
- Используй мультяшное ступенчатое затенение (MeshToonMaterial с градиентной текстурой из 3–4 ступеней) и три источника света: ключевой, небесный и контровой свет цвета текущего уровня.
- Для обводки используй постобработку с детектированием границ: отрисовывай карту нормалей и карту глубины, затем рисуй линии шейдером. Внешний контур должен быть толстым, границы между деталями — тонкими, толщина должна оставаться постоянной на протяжении всей анимации; дополнительно используй суперсэмплинг 1,5× и мультисэмплинговое сглаживание.
  Не используй обводку в виде «увеличенной на один слой чёрной задней поверхности»: при таком подходе толщина получается неравномерной, а линии обрываются на поворотах.
  Порог определения глубины сделай более мягким, а стыки определяй в основном по нормалям, иначе на поверхностях, рассматриваемых под углом, появятся мелкие косые полосы.
- Подвижные детали должны двигаться реалистично: например, крышка сундука должна открываться вокруг петель, а медаль — вращаться вокруг вертикальной оси.
- В режиме ожидания основной объект должен медленно поворачиваться влево и вправо, показывая боковую поверхность и толщину, а также слегка плавать вверх-вниз; под ним должна быть мягкая тень, меняющаяся вместе с высотой.

【Если в кадре есть 2D-иллюстрации (карточки, иконки наград, персонажи)】
- Используй трёхслойное мультяшное затенение: базовый цвет, крупные области теней и цвет бликов, а не один градиентный слой.
- Разделяй толщину линий: внешняя обводка толстая, внутренние структурные линии тонкие.
- У каждого персонажа или предмета должны быть собственные выражение лица и поза, не используй для всех одну и ту же мимику.
- Нарисуй тень под ногами, чтобы объект действительно «стоял» в кадре; различай фоновые узоры по атрибутам, не используй для всех один и тот же набор радиальных линий.

【Темп演出: пять обязательных этапов】
1. Подготовка: основной объект плавает в режиме ожидания, каждые несколько секунд слегка встряхивается, показывая, что по нему можно кликнуть; внизу отображается подсказка «点击».
2. Повышение уровня: после каждого клика объект подпрыгивает, делает один оборот в воздухе, а при приземлении сплющивается и снова отскакивает; одновременно переключается на цвет следующего уровня, вспыхивает, вокруг него появляется кольцо частиц, а заголовок обновляется.
3. Накопление энергии (около 1 секунды): объект трясётся всё сильнее, из щелей пробивается свет, частицы вокруг втягиваются к центру, тон звукового эффекта непрерывно повышается; в последний момент объект резко сплющивается.
4. Взрыв: от точки взрыва наружу распространяются белая вспышка и свечение, экран сотрясается, камера резко приближается, появляются многоуровневые ударные волны, выстреливают тонкие световые полосы, сверкающие звёздочки, монеты и драгоценные камни (с вращением). Взрыв на высоких уровнях должен быть заметно мощнее. Конфетти используй только один раз, в кульминационный момент, не заполняй им весь экран.
5. Демонстрация и подсчёт:
   - Карточки наград вылетают из объекта по дуге, при остановке делают перелёт с последующим покачиванием, числа прокручиваются при подсчёте.
   - Редкие предметы получают радужную светящуюся рамку и уголок «NEW!».
   - После клика по кнопке получения монеты и драгоценные камни летят по кривым Безье к балансу в правом верхнем углу, при достижении каждого значения баланс слегка подпрыгивает.

【Сцена демонстрации: главный герой занимает весь кадр】
- При демонстрации предмета максимальной редкости остальные элементы должны убраться или исчезнуть, а сзади должна появиться чистая градиентная завеса с медленно вращающимся мягким свечением; не помещай главного героя на фоне визуального хаоса.
- Когда появляется завеса, скрой остальные 3D-объекты сцены, иначе постобработка обводки нарисует их контуры на завесе.
- Внешнее свечение главного героя должно находиться за объектом и лишь немного выходить за его края; оно не должно накладываться спереди и превращать объект в сплошное белое пятно.
- Можно добавить шлейф звёздной пыли, вращающийся вокруг главного героя, но его траектория должна полностью проходить снаружи контура героя и не пересекать его переднюю часть.

【Световые эффекты: обязательно мягкие, без резких краёв】
- Свечение фона: используй conic-gradient с плавным градиентным переходом, без резких границ цветовых блоков; наложи 2–3 слоя с разной плотностью и скоростью вращения.
- Световые столпы: сформируй их из 5–7 размытых лучей, расходящихся веером, с лёгким мерцанием яркости каждого; у основания добавь мягкое световое ядро, внутри лучей пусть медленно поднимается световая пыль.
- Белая вспышка: радиальное свечение от точки взрыва наружу (mix-blend-mode: screen), интенсивность не выше 0.8, не допускай пересвета всего экрана до сплошного белого.
- Частицы: каждая искра должна иметь внешний ореол с низкой прозрачностью; ударная волна должна состоять из трёх обводок (широкая и бледная, средняя, тонкая и яркая).

【Материалы и интерфейс】
- Рамки, плашки с названиями и кнопки должны выглядеть материально: градиент шлифованного металла, фасочный свет — яркий сверху слева и тёмный снизу справа, внутренняя тень; в зависимости от редкости меняй декоративные элементы (стальные заклёпки → серебряная рамка с драгоценным камнем → золотая рамка с бриллиантами и маленькой короной).
- Не помещай мелкие числовые значения на маленькие карточки; подробные значения вынеси на информационную панель при демонстрации, где числа прокручиваются вверх и появляются надписи «▲+数值».
- Текстуры, нарисованные на Canvas, должны иметь разрешение как минимум в 1,5 раза больше максимального размера отображения на экране, иначе при увеличении они будут размываться.

【Принципы анимации】
- Используй таймлайны GSAP для постановки анимации. Все движения должны включать сжатие и растяжение, перелёт и эластичный отскок, без равномерной скорости.
- Систему частиц напиши самостоятельно на Canvas 2D: гравитация, сопротивление, время жизни, смешивание слоёв, а также три типа движения — «втягивание», «полёт по кривой» и «вращение вокруг объекта».
- Не используй CSS 3D-перспективу для переворота крупных элементов: при увеличении и боковом перевороте они проецируются в плоскость, заполняющую весь экран; любой 3D-переворот выполняй в WebGL.
- Для всех циклических твинов типа «тряска» и «дыхание» при смене состояния сначала отменяй их, затем возвращай значения к исходным, чтобы избежать ситуации, когда твины заканчиваются на один кадр позже команды остановки и снова устанавливают свои значения.

【Звуковые эффекты】
- Всё синтезируй в реальном времени с помощью Web Audio, без аудиофайлов: подпрыгивание, приземление, аккорд повышения уровня, повышающийся звук накопления энергии, низкочастотный взрыв с шумом, звук появления, тиканье счётчика, звон монет, победный фанфарный сигнал.
- Инициализируй аудио только при первом клике; в правом верхнем углу размести переключатель беззвучного режима.

【Интерфейс и разработка】
- Верхний HUD: переключение режима, баланс монет и драгоценных камней, кнопка отключения звука.
- Интерфейс должен работать и на мобильных экранах; соблюдай настройку «уменьшение движения» (отключай震屏, уменьшай количество частиц).
- Машина состояний анимации должна быть строгой: во время воспроизведения анимации игнорируй клики, не допускай пропущенных нажатий или рассинхронизации состояний.
- Цель — 60 fps. При первом открытии сразу показывай полноценный экран ожидания, он не должен быть пустым.

【Самопроверка перед сдачей】
В моменты накопления энергии, взрыва, демонстрации и подсчёта сделай по одному скриншоту и проверь каждый из них:
- Не закрыт ли главный герой свечением, частицами или текстом?
- Нет ли пересвета, превращающего изображение в сплошное белое пятно?
- Не слишком ли загромождён фон, нет ли заметных лишних линий обводки?
- Хорошо ли читается мелкий текст?
- Не продолжается ли после завершения подсчёта дрожание элементов, которые уже не должны двигаться?

В конце сообщи мне: продолжительность каждого этапа и какие параметры можно изменять для настройки интенсивности演出.

帮我做一个原创的手游「高光时刻」动效：[主体，例如：开宝箱 / 段位晋升 / 成就解锁 / Boss 掉落 / 角色升级]。
做成一个可以直接打开的单文件网页（HTML + CSS + JS），点一下就能完整播放，效果对标商业手游的结算 / 奖励演出。

【世界观与风格】
- 原创美术，不要模仿任何现有游戏的 IP、角色或 Logo。
- 卡通手游风：高饱和配色，统一的深色描边（例如 #1A1033），圆润厚重的造型。
- 配色随等级升级：[等级阶梯，例如：普通绿 → 稀有蓝 → 史诗紫 → 传说金]。每升一级都要切换主色、光效颜色和背景色调。
- 标题用圆胖的游戏字体（如 Titan One / Lilita One），描黑边，加投影；文字逐字「砸」进画面，带回弹。

【主体物：做成真 3D】
- 用 Three.js 建模，不要用平面 SVG 贴图。要有厚度、倒角，以及符合主体的结构细节（木板缝、铆钉、包边、宝石切面、锁扣等）；木板缝这类细节用真实几何体拼出来，不要贴黑线条。
- 着色用卡通分阶（MeshToonMaterial 加 3～4 阶的渐变贴图），配三种灯光：主光、天光、等级色的轮廓光。
- 描边用后期边缘检测：渲染法线图 + 深度图，再用着色器画线。外轮廓粗、零件交界细，粗细全程一致；另外做 1.5 倍超采样和多重采样抗锯齿。
  不要用「放大一圈的黑色背面」那种描边，那样粗细不均、转角会断。
  深度判断的阈值要放宽，接缝主要靠法线判断，否则斜着看的表面会冒出细碎斜纹。
- 活动部件要真实运动，比如箱盖绕铰链翻开、奖章绕竖轴旋转。
- 待机时主体缓慢左右转动，让人看到侧面和厚度，同时轻微上下浮动；脚下要有随高度变化的柔和投影。

【如果画面里有 2D 插画（卡面、奖励图标、角色）】
- 三层卡通着色：底色、成块的阴影色、高光色，不要只用一层渐变。
- 线条分粗细：外轮廓粗，内部结构线细。
- 每个角色或物件要有自己的表情和姿态，不要所有东西共用同一张脸。
- 脚下画投影，让主体「站」在画面里；背景按属性区分图案，不要全用同一套放射线。

【演出节奏：五个阶段，缺一不可】
1. 预备：主体待机浮动，每隔几秒抖一下提示可以点击，底部显示「点击」提示。
2. 升级：每点一次，主体跳起、在空中转一圈、落地时压扁再回弹；同时切换到下一等级的颜色，闪一下光，冒一圈粒子，标题更新。
3. 蓄力（约 1 秒）：主体越抖越剧烈，缝隙透出光，四周粒子往中心吸，音效音调持续上升；最后一刻猛地压扁。
4. 爆发：从爆点向外扩散的泛光闪白、屏幕震动、镜头往前一推、多层冲击波、细长流光迸射、闪光星点、金币和宝石（带旋转）。高等级的爆发要明显更强。彩带只在最高潮用一次，不要满屏彩带。
5. 揭晓与结算：
   - 奖励卡片从主体里沿弧线飞出，落位时带超调和晃动收尾，数字滚动计数。
   - 稀有物品带彩虹流光边框和「NEW!」角标。
   - 点击领取后，金币和宝石沿贝塞尔曲线飞进右上角的余额，每到一个余额就跳一下。

【揭晓舞台：让主角独占画面】
- 最高稀有度揭晓时，其他元素收起或淡出，背后换成一层干净的渐变幕布加缓慢旋转的柔光，不要让主角压在杂乱的背景上。
- 幕布出现时，把场景里的其他 3D 物件隐藏掉，否则后期描边会把它们的轮廓线画在幕布上。
- 主角的外发光要放在主体背后，只从边缘溢出，不能盖在主体前面把它糊成一片白。
- 可以加一圈围绕主角盘旋的星尘拖尾，但轨道必须完整在主角轮廓外侧，不能从主体正面扫过。

【光效：必须柔和，不能有硬边】
- 背景光芒：用带渐变过渡的 conic-gradient，不要一刀切的色块边缘；叠 2～3 层不同密度、不同转速的光。
- 光柱：由 5～7 道带模糊的光束呈扇形散开，亮度各自轻微闪动；根部加一团柔光核心，光里有光尘缓慢上飘。
- 闪白：从爆点向外的径向泛光（mix-blend-mode: screen），强度不超过 0.8，不要整屏纯白过曝。
- 粒子：每个火花都带一圈低透明度的外晕；冲击波用三层描边（宽而淡、中等、细而亮）。

【材质与界面】
- 边框、名牌、按钮要有材质感：金属拉丝渐变、左上亮右下暗的倒角光、内阴影；按稀有度换镶嵌件（钢铆钉 → 银框宝石 → 金框钻石加小王冠）。
- 小卡片上不要塞小字数值；详细数值放到揭晓时的信息面板里，面板里的数字滚动上涨，并弹出「▲+数值」。
- 画在 Canvas 上的贴图，分辨率至少是屏幕上最大显示尺寸的 1.5 倍，否则放大时会发虚。

【动画原则】
- 用 GSAP 时间线编排。所有动作都要有挤压拉伸、超调和弹性回弹，不要匀速。
- 粒子系统用 Canvas 2D 自己写：重力、阻力、生命周期、叠加混合，以及「吸入」「曲线飞行」「环绕」三种运动。
- 不要用 CSS 3D 透视去翻转大尺寸元素，放大加侧翻时会被投影成铺满屏幕的平面，3D 翻转一律放在 WebGL 里做。
- 所有「抖动」「呼吸」类的循环补间，在状态切换时要先取消再归零，避免它比停止指令晚一帧结束，又把值设回去。

【音效】
- 全部用 Web Audio 实时合成，不用音频文件：跳起、落地、升级和弦、蓄力上升音、爆炸低频加噪声、弹出音、计数滴答、金币叮当、胜利号角。
- 第一次点击时才初始化音频；右上角放静音开关。

【界面与工程】
- 顶部 HUD：模式切换、金币和宝石余额、静音按钮。
- 手机宽度也要能用；遵守「减少动态效果」设置（关闭震屏，减少粒子）。
- 动画状态机要严谨：动画播放中忽略点击，不能出现点击被吞或状态错乱。
- 目标 60fps。第一次打开时就是完整的待机画面，不能是空白。

【交付前自检】
在蓄力、爆发、揭晓、结算这几个时刻各截一张图，逐张检查：
- 主角有没有被光晕、粒子或文字挡住？
- 有没有过曝成一片白？
- 背景是否杂乱，有没有穿帮的描边线？
- 小字是否能看清？
- 结算后是否还有东西在不该动的时候继续抖动？

最后告诉我：每个阶段的时长，以及哪些参数可以调整演出强度。

• Промпт на китайском: вставьте как есть — модель его понимает.