Three.js + Claude: кратко о главном
🎯 О чём этот конспект: Полное руководство по генерации кинематографичной 3D-моушн графики с помощью больших языковых моделей (Claude) и JavaScript-библиотеки Three.js. Разбирается принцип работы программной анимации, структура промптов для сложных визуальных эффектов (шейдеры, стекломорфизм, динамическая камера) и способ рендеринга видео в 30 раз дешевле классических нейросетей генерации видео.
👤 Кому будет полезно: Вайбкодерам, разработчикам, контент-мейкерам и фаундерам, которым нужны премиальные анимации для эксплейнеров, продуктовых запусков и соцсетей без бюджета на моушн-дизайнеров и знаний After Effects/Blender.
✨ Что получите: Готовую структуру промптов, техники управления 3D-сценой через код и пошаговый алгоритм создания анимаций с частицами, отражениями и пролетами камеры за ~$0.05 за ролик.
1. Архитектура генерации: рендеринг веб-кода вместо нейросетевого видео
Контекст: Большинство создателей контента используют тяжелые генеративные видеомодели (например, Kling, Runway, Seedance) или сложные пакеты моушн-дизайна (After Effects, Blender). Однако современный веб позволяет создавать полноценную 3D-графику на чистом коде через WebGL и Three.js. Процесс строится не на покадровой генерации пикселей диффузионной моделью, а на написании скрипта с анимацией, который воспроизводится в браузере. За кулисами скрытый (headless) браузер выполняет код и захватывает скриншоты со скоростью 60 кадров в секунду, склеивая их в готовый видеофайл. Это дает полный детерминированный контроль над каждым элементом, текстом и движением камеры.
Тайминг: , ,
Выгода: Идеальная четкость текста и геометрии, отсутствие артефактов диффузии, возможность менять любые параметры за секунды через текстовый промпт.
Как применить:
- Шаг 1: Понимание связки технологий — Архитектура строится на связке: Claude (генерирует код сцены и анимации) → Three.js (библиотека 3D-графики на WebGL) → Рендерер (Remotion, Hyperframes или кастомный скрипт на Puppeteer/Playwright, делающий 60 fps захват).
- Шаг 2: Формирование технического задания для LLM — При постановке задачи ИИ необходимо явно указывать генерацию независимого HTML/JS кода с Three.js, использующего таймлайны и дельта-тайм для плавной покадровой отрисовки.
Create a standalone 3D animation scene using Three.js.
Requirements:
- Frame rate: 60 FPS deterministic animation loop
- Format: Vertical 9:16 (1080x1920) or Horizontal 16:9 (1920x1080)
- Architecture: Pure JavaScript with Three.js via CDN, utilizing requestAnimationFrame with absolute time/frame ticks for precise video capture.Результат: Чистый исполняемый код сцены, готовый для пакетного рендеринга в MP4 с точностью до миллисекунды.
2. Визуальные эффекты премиум-уровня: Шейдеры, Glassmorphism и 3D-камера
Контекст: Обычный плоский моушн-дизайн от нейросетей выглядит дешево и шаблонно. Чтобы анимация выглядела как работа дорогой дизайн-студии за тысячи долларов, в промпт необходимо закладывать три ключевых компонента: стекломорфизм (материалы с частичной прозрачностью и преломлением), кастомные шейдеры (GPU-эффекты свечения, отражений и систем частиц) и непрерывные пролеты 3D-камеры. Камера не должна просто переключать слайды — она должна динамически летать сквозь трехмерное пространство между объектами, создавая глубину и кинематографичность.
Тайминг: , ,
Выгода: Визуальный стиль студийного уровня без необходимости настраивать рендер-движки в Blender или Cinema 4D.
Как применить:
- Шаг 1: Активация шейдеров и материалов — Укажите модели использовать кастомные шейдеры (GLSL/Three.js Shaders) для расчетов отражений, свечения (glow) и физики частиц на GPU.
- Шаг 2: Настройка стиля Glassmorphism — Задайте свойства материалов:
MeshPhysicalMaterialс параметрамиroughness,transmission,thicknessи полупрозрачностью, чтобы сквозь панели были видны фоновые частицы. - Шаг 3: Программирование траектории камеры — Требуйте создания ключевых точек (waypoints) и интерполяции позиции и таргета камеры (
camera.position,camera.lookAt) между сценами.
Visual Style & Shader Specifications:
- Style: Frosted Glassmorphism with metallic accents and dark aesthetic background.
- Materials: Use THREE.MeshPhysicalMaterial with transmission: 0.9, roughness: 0.15, thickness: 1.2 for glass panels.
- Shaders & Particles: Implement GPU particle field (10,000+ floating particles) with glowing vertices and real-time floor reflections using shaders.
- Camera Choreography: Continuous cinematic camera path. Do not use static cuts. Fly the camera smoothly between elements in 3D space with easing (cubic-bezier).Результат: Объемная сцена с реалистичным преломлением света, неоновыми частицами и плавной кинематографичной траекторией движения камеры.
3. Экономика и выбор модели: экономия 97% бюджета по сравнению с Video AI
Контекст: Специализированные нейросети генерации видео (например, Seedance 2.5) тарифицируются посекундно — около $0.10 за секунду в минимальных тарифах. Ролик длиной 15 секунд обходится минимум в $1.50. При этом любая правка опечатки или положения объекта требует полной повторной оплаты генерации. Метод генерации моушн-графики через Three.js потребляет около 37 000 токенов на сложный 15-секундный скрипт. При использовании топовой модели для кодинга через подписку себестоимость ролика составляет около $0.05, а через прямой API — ~$0.74.
Тайминг: , ,
Выгода: Снижение стоимости производства одного видеоролика с $1.50 до $0.05 (экономия более 96%) и возможность создавать до 400 видео в неделю в рамках стандартного тарифного плана.
Как применить:
- Шаг 1: Выбор модели — Используйте Claude 3.5 Sonnet / Claude Opus (или актуальные флагманские кодинг-модели Anthropic). Модели Anthropic значительно превосходят конкурентов в пространственном мышлении и сборке сложных Three.js сцен без синтаксических ошибок.
- Шаг 2: Оптимизация правок — При внесении изменений не перегенерируйте весь скрипт с нуля. Просите модель точечно скорректировать конкретную функцию интерполяции, цвет материала или размер шрифта, экономя токены.
Modify the existing Three.js script:
- Increase typography scale of the central header by 20%.
- Slow down the camera transition between Scene 2 and Scene 3 by 1.5 seconds.
- Adjust particle opacity from 0.8 to 0.4.
Return only the modified code blocks.Результат: Дешевый, масштабируемый и полностью редактируемый конвейер генерации визуального контента.
4. Промпт-инжиниринг для 3D: ролевой хак «Showreel» и верификационный цикл
Контекст: При абстрактных запросах нейросети склонны выдавать примитивные 2D-сцены с базовым текстом. Чтобы заставить модель писать код наивысшего качества, применяются проверенные техники: покадровый тайминг сцен, ролевой хак с «откликом на вакансию мечты» и обязательный цикл самопроверки (verification loop). Модель заставляют проанализировать собственный сгенерированный код на пересечения геометрии, нечитабельные размеры шрифтов на мобильных экранах и некорректную синхронизацию анимации до выдачи финального результата.
Тайминг: , , ,
Выгода: Исключение визуального мусора, наложения текста на 3D-объекты и получение нестандартных дизайнерских решений с первой попытки.
Как применить:
- Шаг 1: Внедрение ролевого фреймворка — Задайте контекст предельной мотивации: «Действуй так, будто это твой шоурил для получения должности ведущего моушн-дизайнера».
- Шаг 2: Посценная раскадровка с таймингами — Разбейте видео на четкие временные слоты с описанием визуального фокуса для каждого интервала.
- Шаг 3: Включение блока верификации (Self-Correction Loop) — Добавьте инструкцию на аудит верстки.
Role & Context:
Act as a world-class motion designer. Pretend this project is your portfolio submission for your dream lead motion graphics job. Create a visually stunning 3D showreel that proves your mastery.
Storyboard Breakdown:
- 0.0s - 3.0s: Scene 1 — Intro with floating glass cards and glowing 3D node network.
- 3.0s - 8.0s: Scene 2 — Camera zooms in, nodes assemble into a spherical data cluster with shader pulses.
- 8.0s - 15.0s: Scene 3 — Dynamic orbit rotation displaying summary metric card with glowing edges.
Verification Loop:
Before outputting final code, check for:
1. Text readability and minimum font size on mobile screens (no tiny labels).
2. Element collision (ensure 3D meshes do not clip through glass cards).
3. Smooth easing on all camera position updates.Результат: Продуманный, кинематографичный код сцены без визуальных багов и наложений.
5. Практические сценарии применения: от визуализации сложных концепций до Reels
Контекст: 3D-моушн на коде эффективен не только для декоративного дизайна, но и для визуализации абстрактных технических концепций, которые тяжело объяснить словами или текстом: работа RAG (векторный поиск), алгоритм градиентного спуска в нейросетях, передача сетевых пакетов по земному шару. Живая анимация в 3D пространстве наглядно демонстрирует кластеризацию векторов, многомерные матрицы и архитектуру сервисов.
Тайминг: , ,
Выгода: Мгновенное повышение удержания аудитории (retention rate) в соцсетях, рост конверсии лендингов и доступное объяснение сложных SaaS-продуктов.
Как применить:
- Шаг 1: Оверлеи для подкастов и созвонов — Нарезка хайлайтов экспертных интервью с наложением 3D-графики поверх спикера в местах объяснения сложных терминов.
- Шаг 2: Эксплейнеры для продуктовых запусков — Создание анимированных 3D-сцен для презентации новых фичей программного обеспечения.
- Шаг 3: Образовательный контент — Визуализация работы алгоритмов (RAG, базы данных, API) в виде 3D-графиков и векторных пространств.
Create an educational 3D visual explainer for RAG (Retrieval-Augmented Generation):
1. Represent user query as an emitted glowing laser pulse.
2. Represent vector database as a 3D point cloud of documents floating in space.
3. Show nearest-neighbor search: highlight the 3 closest document nodes with glowing bounding boxes.
4. Animate retrieved context flowing directly into an LLM core sphere, which then generates the final response.Результат: Наглядный вирусный эксплейнер, упрощающий понимание сложной технической темы для клиентов и подписчиков.
Three.js + Claude: ответы на частые вопросы
В: Нужен ли мощный компьютер с топовой видеокартой для создания такой графики?
О: Нет. Написание кода происходит в облаке через интерфейс Claude. Для запуска и рендеринга Three.js достаточно стандартного браузера или легковесного headless-скрипта на любом современном ноутбуке со встроенной графикой.
В: Чем этот подход лучше генерации через Runway Gen-3, Kling или Sora?
О: Три ключевых преимущества: 100% контроль над текстом и геометрией (нет галлюцинаций и искажения букв), стоимость в 20–30 раз ниже ($0.05 против $1.50+), а также возможность точечно редактировать любые параметры через код без перегенерации всего ролика.
В: Как превратить сгенерированный HTML/Three.js код в MP4 видео?
О: Используются инструменты программного рендеринга видео из веба: фреймворк Remotion, сервис Hyperframes или утилиты на базе Puppeteer + FFmpeg, которые открывают страницу, пошагово вызывают кадры анимации и сохраняют их в видеопоток.
В: Что делать, если модель выдает ошибку в Three.js коде или черный экран?
О: Скопируйте текст ошибки из консоли браузера (DevTools F12) и отправьте обратно в чат со словами «Fix this error in Three.js». Чаще всего проблемы связаны с устаревшими версиями методов или неправильной инициализацией освещения (THREE.AmbientLight / THREE.DirectionalLight).
В: Можно ли делать горизонтальные (16:9) и квадратные (1:1) видео, а не только Shorts/Reels (9:16)?
О: Да. Достаточно явно указать пропорции и разрешение рендера в промпте (например, aspect ratio 16:9, width: 1920, height: 1080). Three.js автоматически пересчитает матрицу проекции камеры PerspectiveCamera.
В: Какая версия модели Claude лучше всего справляется с этой задачей?
О: Наилучшие результаты показывают флагманские кодинг-модели Anthropic (семейство Claude 3.5 Sonnet / Opus). Они обладают лучшим пониманием трехмерной геометрии, математики векторов и синтаксиса Three.js/GLSL по сравнению с аналогами.
Three.js + Claude: инструменты и ссылки из видео
- Three.js — Популярная JavaScript-библиотека для создания и отображения интерактивной 3D-компьютерной графики в веб-браузере с использованием WebGL —
https://threejs.org - Claude (Anthropic) — Большая языковая модель, используемая для генерации кода сцен, шейдеров и логики анимации —
https://claude.ai - Remotion — Фреймворк для создания видео с использованием React, HTML, CSS и Three.js — упомянут в видео
- Hyperframes — Инструмент для программной генерации и моушн-дизайна через код — упомянут в видео
- SeaDance 2.5 / Kling / Runway — Нейросетевые AI-видеомодели для сравнения себестоимости и подходов — упомянуты в видео
- Applied AI Mastermind — Сообщество и образовательная программа автора по созданию видео и моушн-графики с помощью ИИ — упомянут в видео
Конспект создан на основе видео «Motion Graphics with Claude and Three.js» канала Applied AI. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=CCUSpJkAfgU
