Начать проект →
03Эксперимент · 3D-фильм

3D-фильм, который целиком помещается в один HTML-файл.

76 секунд над долиной: каменный виадук, паровоз, деревня у канала и горы в дымке. Землю, траву, воду, дым и музыку генерирует код прямо во вкладке браузера. В файле нет моделей, текстур и звукозаписей.

Смотреть в 3D ↗Смотреть видео ↓
  • 76 секунд
  • 6 планов
  • 1 474 строки кода
  • 0 моделей, текстур и записей

Видео без звука. Сгенерированный саундтрек играет в 3D-версии.

01В кадре

Что рисует код

  1. 01

    Земля и трава

    Холмы, поля и канал строятся из функции шума. Около двух миллионов травинок гнутся в поле ветра на видеокарте.

  2. 02

    Виадук и поезд

    Каменные арки, рельсы и шпалы идут по одной линии пути. Паровоз вращает колёса и шатуны со скоростью своего хода.

  3. 03

    Дым и вода

    Дым и пар выходят из трубы клубами в такт колёсам. Канал отражает виадук и небо.

  4. 04

    Свет и дымка

    Низкое вечернее солнце, длинные тени и дымка, которая теплеет в сторону солнца. Леттербокс, зерно и цветокоррекция накладываются одним проходом.

  5. 05

    Звук

    Пыхтение в такт колёсам, стук на стыках, гудок, ветер, птицы и тихие аккорды. Всё синтезируется через WebAudio.

02Как сделано

Один запрос и проверка каждого кадра

  1. 01

    Образец

    Идея взята из демо Lentils (@Lentils80): пролёт над долиной с виадуком и паровозом в одном файле, собранный на Claude Opus 5.

  2. 02

    Сборка

    Claude Code с моделью Claude Opus 5.5 написал сцену, сценарий камеры и звук одним файлом на Three.js r185. Первая версия была готова меньше чем за час.

  3. 03

    Проверка

    Каждый черновик рендерился в стоп-кадры и в полное видео 30 кадров в секунду, дальше проверка по кадрам. На видеокарте RTX 3060 фильм идёт около 60 кадров в секунду.

  4. 04

    Исправление

    В Chrome на OpenGL экран с 11-й секунды мигал чёрным. Частица дыма после конца жизни давала некорректное число, а проход свечения размазывал его на весь кадр. Одно ограничение значения это исправило.

03Где применить

Тот же метод для сцены клиента

Такая сцена может показать продукт, место или событие. Она работает на сайте без плагинов и покадрово выгружается в видео для соцсетей.

  • Главная сцена страницы продукта
  • Пролёт над площадкой или туристическим местом
  • Трейлер события из живой сцены
  • Короткие видео-петли для соцсетей
Обсудить 3D-сцену →
04Вопросы

Вопросы о фильме

Что нужно, чтобы смотреть 3D-версию?

Современный браузер с WebGL 2: Chrome, Edge, Firefox или Safari. Устанавливать ничего не нужно.

Работает ли на телефоне?

Да. На телефоне сцена сажает около 620 000 травинок вместо двух миллионов, чтобы картинка шла плавно. Старые телефоны всё равно могут тормозить.

Как сделано видео?

Сцена точно отрисовывает любой момент по запросу. Мы сняли 2 280 кадров в 1080p и собрали из них MP4, который стоит на этой странице.

Можете сделать такую сцену для нас?

Да. Пришлите короткий бриф через страницу контактов: что должно быть в кадре, где сцена будет работать и какой срок.

Идея: Lentils (@Lentils80). Код: Claude Opus 5.5 в Claude Code. Режиссура и проверка: Marketing MIX. x.com/Lentils80