Саммари

🎯 О чём этот конспект: Пошаговый пайплайн создания нестандартных веб-интерфейсов с помощью нейросетей и AI-агента Claude Code. В видео подробно разбираются две механики: реализация интерактивного 2.5D-персонажа (лягушки), чья голова и глаза отслеживают курсор пользователя на 360°, и внедрение полноценной высокополигональной 3D-модели (круасана с текстурой гжели), сгенерированной из Multi-view изображений с помощью китайской нейросети Hunyuan Global.

👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, UI/UX-дизайнерам и AI-креаторам, которые хотят уйти от шаблонных сайтов со стандартной скролл-анимацией и научиться интегрировать видеоспрайты и 3D-объекты без ручного моделирования.

✨ Что получите: Готовый алгоритм связки Gemini + Google Flow + Hunyuan Global + Claude Code: от генерации согласованных ракурсов до промптов для сборки адаптивного лендинга с интерактивными элементами и оптимизацией полигонов.

1. Подготовка видео-ассетов для персонажа с 360° трекингом курсора

Контекст: Большинство современных сайтов используют однотипные CSS- или GSAP-анимации по скроллу, которые больше не вызывают вау-эффекта у пользователей. Создание персонажа, динамически реагирующего на положение мыши, обычно требует сложной 3D-графики, риггинга и скелетной анимации в Three.js. Автор предлагает альтернативный и быстрый подход: генерация видеоряда, в котором объект плавно поворачивается во всех плоскостях, с последующей привязкой таймлайна видео к координатам курсора. Основа успеха здесь — правильный референс и подготовка промпта в LLM для графических нейросетей.

Тайминг: [01:15], [02:03], [03:40], [06:37]

Выгода: Экономия десятков часов на 3D-моделировании и настройке риггинга персонажа. Получение кинематографичного интерактивного персонажа за 10–15 минут генераций.

Как применить:

• Шаг 1: Поиск концепта и референса — Pinterest — Найдите референсное изображение персонажа или сцены с выразительной мимикой или формой (например, стилизованное животное с большими глазами на контрастном фоне).
• Шаг 2: Обратный промптинг референса — Gemini — Загрузите найденную картинку в Gemini и запросите генерацию детализированного англоязычного промпта под конкретный стиль и позиционирование объекта в кадре:

Привет, напиши мне промпт на английском языке для генерации похожего изображения в Nano Banana. Мне нужен похожий хамелеон, который сидит в правой стороне экрана, стилизованный 3D-персонаж, высокое качество, чистый изолированный фон.

• Шаг 3: Генерация статичного мастер-кадра — Google Flow — Создайте новый проект в Google Flow. В выпадающем меню выберите модель Nano Banana Pro, формат соотношения сторон 16:9 или 4:3, выставьте генерацию по 4 варианта (X4). Скорректируйте персонажа под свою задачу (в примере автора хамелеон был заменен на детализированную жабу).
• Шаг 4: Генерация кругового видео (360° Turnaround) — Google Flow — Переключитесь в режим Video (16:9), выберите модель (например, Veo / Omni) и загрузите утвержденный кадр с персонажем. Опишите поворот головы во все стороны без резких скачков, чтобы при перемещении курсора не возникало застреваний:

A smooth 360 degree head rotation of the cute frog character, looking up, down, left, right, seamless movement, high quality 3D render, studio lighting, isolated neutral background.

• Шаг 5: Экспорт видеоролика — Google Flow — Нажмите на три точки в углу готового видео, выберите разрешение 1080p и скачайте MP4-файл на локальный диск.

Результат: Качественный MP4-ролик с плавным вращением головы персонажа во всех направлениях, готовый для маппинга кадров на координаты курсора.

2. Вайбкодинг страницы с трекингом курсора в Claude Code

Контекст: Сгенерированное видео само по себе не интерактивно — его необходимо связать с DOM-деревом и слушателями событий мыши. Традиционная верстка такого функционала вручную требует написания логики интерполяции, нормализации координат clientX/clientY и управления текущим временем видео (currentTime). Claude Code позволяет за один промпт развернуть локальный веб-сервер, создать разметку и прописать логику отслеживания мыши, преобразующую позицию курсора в соответствующий таймкод видео.

Тайминг: [07:23], [07:38], [08:25]

Выгода: Развертывание рабочего интерактивного прототипа за 2–3 минуты без ручного написания JS-логики математического маппинга координат.

Как применить:

• Шаг 1: Инициализация рабочего каталога — Терминал / Файловая система — Создайте на рабочем столе чистую директорию под проект (например, frog-tracking) и скопируйте в нее скачанный видеофайл персонажа.
• Шаг 2: Открытие проекта в Claude Code — Claude Code — Откройте Claude Code, перейдите во вкладку взаимодействия с кодовой базой, нажмите Open Folder и выберите созданную папку с видеофайлом.
• Шаг 3: Передача мастер-промпта агенту — Claude Code — Сформулируйте задачу на создание иммерсивного лендинга с явным указанием поведения видеоплеера при перемещении курсора:

Создай иммерсивный одностраничный сайт. В центре страницы расположи крупную реалистичную видео-иллюстрацию лягушки из локального файла. Напиши JavaScript-логику: при движении мыши по экрану видео должно интерактивно менять свой прогресс воспроизведения (currentTime) в зависимости от положения курсора (X и Y), создавая эффект, будто глаза и голова лягушки непрерывно следят за курсором пользователя. Добавь плавную интерполяцию (lerp), чтобы движения не дергались. Стилизуй страницу в минималистичном премиальном стиле с акцентной типографикой.

• Шаг 4: Проверка и запуск — Браузер — Откройте созданный файл index.html в браузере или запустите локальный сервер (например, через расширение Live Server или команду npx serve .). Проверьте плавность отклика видео на перемещение мыши по всей рабочей области экрана.

Результат: Готовый лендинг, где персонаж плавно поворачивает голову и смотрит строго в ту точку экрана, где находится курсор мыши.

3. Генерация 3D-моделей из Multi-View изображений в Hunyuan Global

Контекст: Внедрение настоящих 3D-ассетов на коммерческие сайты традиционно требует навыков работы в Blender, 3ds Max или найма 3D-моделлера. Генерация 3D через классический Text-to-3D в нейросетях часто дает мыльные текстуры и поломанную геометрию с обратной стороны объекта, так как ИИ не знает скрытых плоскостей. Китайская нейросеть Hunyuan Global решает эту проблему с помощью генерации по множественным ракурсам (Multi-View Images), собирая геометрию из согласованных видов со всех сторон.

Тайминг: [09:17], [10:37], [11:59], [13:02], [14:04]

Выгода: Создание коммерческой 3D-модели сложной формы (на примере круасана с узором гжели) за 5 минут без знаний топологии, UV-развертки и шейдинга.

Как применить:

• Шаг 1: Подготовка мастер-изображения объекта — Pinterest / Google Flow — Найдите или сгенерируйте концепт объекта с выразительной фактурой (автор использовал круасан, оформленный в стиле фарфоровой росписи Гжель).
• Шаг 2: Создание согласованных ракурсов (Multi-View) — Google Flow — Сгенерируйте с помощью промптов вид одного и того же объекта с 4 обязательных сторон:
  • Центральный вид спереди (Front view)
  • Вид справа (Right view)
  • Вид слева (Left view)
  • Вид снизу / сверху (Bottom / Top view)
• Шаг 3: Настройка параметров в Hunyuan Global — Hunyuan Global (3D) — Перейдите в интерфейс Hunyuan Global, выберите раздел Image to 3D и активируйте вкладку Multiple Images -> Add Multiple Views.
• Шаг 4: Выбор модели и плотности сетки — Hunyuan Global — В параметре Select Model установите актуальную версию Generation 3.1. В селекторе Model Count (число полигонов/шейдеров) выберите максимальную детализацию — 1.5M для максимальной проработки текстур и складок.
• Шаг 5: Загрузка ракурсов и генерация — Hunyuan Global — Распределите подготовленные изображения по слотам: фронтальный, правый, левый и нижний ракурсы. Нажмите Generate Now и дождитесь окончания генерации геометрии и текстурных карт.
• Шаг 6: Экспорт в формате OBJ — Hunyuan Global — В окне предпросмотра готовой модели в правом верхнем углу переключите формат с GLB на OBJ (Object) и скачайте архив. Распакуйте архив: внутри будут .obj-файл геометрии, .mtl-библиотека материалов и текстурные карты.

Результат: Высокополигональная 3D-модель в формате OBJ с наложенными UV-текстурами высокого разрешения, готовая к веб-рендерингу.

4. Сборка 3D-лендинга, автосжатие полигонов и мобильная адаптация в Claude Code

Контекст: Сгенерированная модель на 1.5 миллиона полигонов весит десятки мегабайт и в исходном виде моментально обрушит производительность браузера, особенно на мобильных устройствах. Чтобы интерактивный 3D-объект работал со скоростью 60 FPS, необходим рендерер (Three.js), правильная настройка освещения, плавный автоповорот, параллакс-реакция на мышь и децимация (сжатие) сетки без потери визуального качества текстур.

Тайминг: [14:51], [15:20], [16:15], [16:44]

Выгода: Автоматическая оптимизация «тяжелой» модели силами AI-агента, полная адаптивность под iOS/Android и сборка лендинга за один промпт.

Как применить:

• Шаг 1: Подготовка файлов проекта — Файловая система — Создайте новую папку (например, croissant-nordic-bakery). Скопируйте в нее все распакованные файлы из Hunyuan (.obj, .mtl, текстуры .png/.jpg).
• Шаг 2: Подключение проекта к Claude Code — Claude Code — Откройте каталог проекта через New -> Open Folder. Убедитесь, что AI-агент видит 3D-ассеты в файловом дереве.
• Шаг 3: Запуск сборки лендинга через мастер-промпт — Claude Code — Отправьте подробное техническое задание на интеграцию Three.js и построение первого экрана:

Создай премиальный одностраничный сайт для скандинавской пекарни "Nord Bakery". 
Визуальный стиль: дорогой минимализм, глубокие теплые оттенки, стильная антиква в заголовках.
Структура первого экрана:
1. Размести интерактивный 3D-объект, загрузив локальную модель из папки (OBJ/MTL). Это круасан с выразительной текстурой.
2. Объект должен плавно парить и вращаться в воздухе по оси Y по умолчанию.
3. Добавь реакцию на перемещение курсора мыши (легкий наклон и параллакс) и на скролл страницы.
4. Настрой реалистичные студийные источники света в Three.js (Key light, Fill light, мягкий Rim light для золотистого отблеска).
5. Обеспечь корректный рендеринг на смартфонах (Touch events для вращения пальцем, адаптивный масштаб canvas под мобильные экраны вроде iPhone).

• Шаг 4: Автоматическое сжатие полигональной сетки — Claude Code — Если модель подтормаживает или долго загружается, поручите агенту оптимизировать геометрию:

Модель содержит около 1.5 млн полигонов и слишком тяжелая для продакшена. Оптимизируй и сожми 3D-модель (уменьши количество полигонов с помощью децимации геометрии), сохранив максимальное качество текстур и нормалей, чтобы сайт грузился мгновенно на мобильных устройствах.

• Шаг 5: Проверка адаптивности в DevTools — Браузер — Откройте сайт, вызовите инструменты разработчика (F12), включите Device Toolbar и проверьте работу 3D-сцены на эмуляции мобильных экранов (например, iPhone XR). Убедитесь, что круасан отцентрирован, корректно скейлится и не ломает верстку.

Результат: Рабочий адаптивный лендинг с интерактивной 3D-моделью, летающей в воздухе, реагирующей на курсор и тач-события, оптимизированной для мгновенной загрузки.

FAQ

В: Почему для персонажа с трекингом глаз используется видео, а не Three.js с риггингом?

О: Генерация видеоролика с круговым обзором в нейросети занимает считанные минуты и дает фотореалистичную или стилизованную картинку кинокачества с тенями и сложной мимикой. Полноценный 3D-риггинг персонажа такого уровня в Blender с последующим переносом скелета в Three.js требует дней профессиональной работы 3D-аниматора.

В: Зачем нужны Multi-View изображения в Hunyuan Global, если есть Text-to-3D?

О: Одиночное изображение или текстовый промпт заставляют нейросеть «додумывать» невидимые части объекта. В результате задняя и нижняя стороны часто получаются размытыми, асимметричными или с артефактами. Подача 4 ракурсов (спереди, слева, справа, снизу) гарантирует цельную топологию и четкую текстуру со всех углов обзора.

В: В каком формате лучше выгружать 3D-модель из Hunyuan: GLB или OBJ?

О: Автор рекомендует формат OBJ вместе с сопутствующими файлами MTL и картами текстур. Этот формат дает Claude Code прямой доступ к текстовому описанию геометрии и материалов, что упрощает AI-агенту манипуляции с шейдерами, освещением и алгоритмами сжатия в коде Three.js.

В: Как именно Claude Code сжимает 1.5-миллионную модель без потери качества?

О: По запросу пользователя AI-агент может применить скрипты децимации (например, через three/addons SimplifyModifier или внешние утилиты сборки), уменьшая плотность полигональной сетки на плоских участках и сохраняя детализацию текстурных координат (UV) и карты нормалей, за счет чего визуальный вид не страдает.

В: Будет ли интерактивная 3D-модель работать на смартфонах?

О: Да. В коде инициализации Three.js агент прописывает слушатели touch-событий (touchstart, touchmove), аналогичные движению мыши, а также настраивает адаптивную камеру (PerspectiveCamera) в зависимости от соотношения сторон экрана window.innerWidth / window.innerHeight.

В: Что делать, если персонаж в видео поворачивается слишком резко и застревает?

О: Проблема заключается в промпте для видеогенерации. Необходимо перегенерировать видеоряд в Google Flow, добавив в запрос акцент на бесшовность и плавность: «ultra-smooth continuous slow rotation», исключив резкие переходы камеры и смену позы тела.

Ресурсы и ссылки

• Pinterest — платформа для поиска визуальных концептов и референсов для персонажей и 3D-объектов — https://pinterest.com
• Google Gemini — языковая модель, используемая для генерации подробных англоязычных промптов по картинкам — https://gemini.google.com
• Google Flow (с моделями Nano Banana Pro и Veo) — нейросетевая среда для генерации статичных изображений и видеороликов — упомянут в видео
• Hunyuan Global (Hunyuan3D) — китайская нейросеть от Tencent для генерации 3D-моделей по тексту и Multi-view изображениям (версия 3.1) — упомянут в видео
• Claude Code — агентская среда от Anthropic для написания кода, верстки веб-страниц и интеграции ассетов — упомянут в видео

Конспект создан на основе видео «Как делать крутые эффекты на сайтах с помощью нейросетей» канала «Максим | Последняя надежда русского дизайна». Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=wRrXhWSWGqw