Прозрачная коробка открывается, диск с радужным отливом выезжает и крутится. Всё это одна HTML-страница на three.js, без Blender и без единой 3D-модели. Ниже - промпт, по которому такую сцену повторит твой Claude, как её открыть и записать в ролик, и что так можно сделать для своего бизнеса.
three.js - бесплатная библиотека, которая рисует 3D прямо в браузере. Обычно к ней прикладывают модели из 3D-программ. Здесь моделей нет: коробка, петля, лоток и диск собраны из простых фигур в коде, а пластик, блики и радуга на диске - это материалы и шейдеры, которые Claude тоже пишет сам.
Идею мы увидели в посте автора в X: там Claude собрал коробку CD с открывающейся крышкой на three.js и шейдерах. Ролик в нашем посте - наш повтор этой идеи: Claude написал сцену, мы пару раз поправили камеру и свет.
Вставь в Claude целиком. Подойдёт Claude Code или обычный чат на claude.ai - в чате попроси отдать результат
одним файлом cd.html.
Сделай одну HTML-страницу на three.js (подключи с CDN через importmap, точная версия 0.169.0). Никаких 3D-моделей и файлов: вся геометрия и материалы кодом. Сцена: прозрачная пластиковая коробка от CD (джевел-кейс 142 x 125 x 10 мм) лежит на тёмном полу. - Крышка из прозрачного пластика: MeshPhysicalMaterial с transmission, лёгким преломлением, clearcoat и слабым зеленоватым оттенком на торцах, как у настоящего пластика. Крышка крепится на петле по левой кромке. - Лоток чёрный глянцевый, в центре втулка-«ромашка» с зубчиками. - Под крышкой вкладыш-обложка, нарисуй его на canvas: тёмный градиент, концентрические круги и крупный заголовок «СДЕЛАНО КОДОМ», подзаголовок «без 3D-программ и моделей». Шрифт с кириллицей из Google Fonts; дождись загрузки шрифта (document.fonts.load) до того, как рисовать canvas. - Диск: кольцо со своим шейдером. Тёмное зеркало плюс радужная полоса дифракции вдоль радиуса, которая бежит при вращении и движении камеры, лёгкий радужный отлив по всей площади, прозрачная зона у центра. Свет: тёмная студия. Для бликов на пластике сделай карту окружения из сцены со световыми панелями через PMREMGenerator. Ключевой свет с мягкими тенями, холодный контровой, тёплый боковой. Блики должны медленно ползти по крышке. Анимация, 20 секунд, по кругу: 0-0,6 с - коробка закрыта, видно обложку сквозь пластик; 0,6-3,6 с - крышка плавно открывается примерно на 100 градусов; 4-6,5 с - диск поднимается, наклоняется к камере и раскручивается; 6,5-14 с - диск парит и крутится, камера плавно облетает сцену; 14-16 с - диск опускается в лоток; 16-18 с - крышка закрывается, финальный план на обложку. Камера всё время в мягком движении по сплайну, без рывков, коробка в кадре целиком. Время анимации считай от performance.now(), чтобы сцену можно было записать кадр за кадром. Размер под 1920x1080, тон-маппинг ACES. Весь текст в кадре по-русски.
cd.html и открой двойным щелчком в Chrome. Нужен интернет: three.js и шрифты подгружаются с CDN.Запиши эту страницу в видео 1920x1080, 30 кадров в секунду, 20 секунд. Не записью экрана, а кадр за кадром: подмени в странице часы (performance.now и requestAnimationFrame), чтобы между кадрами проходило ровно 1/30 секунды, снимай каждый кадр через Chrome в режиме headless и собери файл через ffmpeg (libx264, crf 18, yuv420p). Если ffmpeg нет - скажи, как поставить.
Тот же приём работает с чем угодно, что можно описать словами. Замени «…» на своё.
Сделай так же на three.js упаковку моего товара: коробка 20 x 12 x 6 см, крышка открывается, внутри флакон, который медленно поворачивается. Цвета упаковки: белый и тёмно-зелёный, на крышке название «…». Без 3D-моделей, всё кодом, 15 секунд, по кругу.
Сделай на three.js 3D-обложку для моего курса: книга в твёрдом переплёте, обложка нарисована на canvas, заголовок «…». Книга медленно поворачивается и открывается на первом развороте. Тёмный фон, мягкий свет, 12 секунд.
Сделай на three.js анимацию моего логотипа: буквы «…» выдавлены в объём, стекло с бликами, логотип собирается из частей и поворачивается к камере. 8 секунд, тёмный фон, под заставку ролика.
Готовую страницу можно поставить на сайт как живой блок, а запись - в рилс, рекламу или заставку ролика.
Мы учим двум вещам: делать AI-видео и работать с Claude так, чтобы он закрывал реальные задачи бизнеса. У меня есть бесплатный разбор на полтора часа - смотреть можно сразу после регистрации.
Смотреть разбор