Короткий ответ
3D веб-презентация — это колода, которая работает в браузере: читаемые HTML-слайды лежат поверх живой сцены three.js, и каждый слайд переводит камеру к своему кадру. В семи концепт-колодах VITON13 всего 78 слайдов; каждая загружает 235–252 КБ JavaScript в gzip, держала 60 fps на MacBook с Apple M5 и выгружается в PDF 16:9 для почты.
Семь концепт-колод на одном движке
В сентябре 2026 года VITON13 Studio добавила в портфолио набор из семи концептов презентаций. Каждый сделан под задачу, с которой клиенты приходят в студию снова и снова: футбольный клуб Avrora продаёт спонсорский пакет, логистический стартап NEXORA привлекает раунд Series A, а дальше идут запуск умного кольца NOVA, квартиры в жилой башне NORD 81, космическая компания ORBITA, партнёрские пакеты фестиваля PULSE 2027 и геномная клиника HELIX. Все бренды, цифры, имена и телефоны в них придуманы, и последний слайд каждой колоды прямо об этом говорит.
Вместе в них 78 слайдов на русском языке: двенадцать в инвестиционном питче и по одиннадцать в каждой из шести остальных. Страница-витрина перечисляет колоды с числом слайдов, типом перехода и ссылкой на скачивание PDF. Все семь работают по адресу tarasovvitalii.com/demos/presentations/, в портфолио основателя студии, а сама студия оформила их как кейс с экранами и замерами.
Пролёт камеры вместо резкой смены слайдов
3D веб-презентация в этом наборе — это веб-страница из двух слоёв. Сзади живая сцена three.js: ночной стадион, стеклянная башня, спутник над Землёй. Спереди обычные HTML-слайды с заголовками, цифрами и графиками. У каждого слайда в сцене есть своя станция камеры, поэтому, когда докладчик идёт дальше, камера перелетает к следующему кадру, а текст поверх неё сменяется.
Слайды меняются одним из семи 3D-переходов, подобранных под бренд: спринт со скоростными штрихами у футбольного клуба, вращающийся куб у инвестиционного питча, пролёт сквозь слайд у кольца, перелистывание книжной страницы у жилой башни, орбита у космической компании, глитч-флип у фестиваля и мягкий подъём у клиники. Когда слайд открывается, цифры набегают счётчиком, столбчатые диаграммы растут, а небольшие 3D-подписи привязываются к частям сцены.
Поскольку текст остаётся HTML, его можно выделить, скопировать и прочитать скринридером, и он сохраняет чёткость на любом дисплее. В этом главное отличие от видео или анимированного экспорта, где каждое слово превращается в пиксели.
Сцены из кода вместо стоковых роликов
Ни одна из семи колод не использует скачанную 3D-модель, фотографию или видео. Стадион собран примерно из 43 000 кресел и болельщиков, башня NORD 81 на слайде о стройке вырастает этаж за этажом, кольцо разбирается на шесть подписанных деталей, а Земля под спутником ORBITA сгенерирована шейдерами. Повторяющиеся объекты вроде кресел и окон рисуются через InstancedMesh из three.js — этот механизм выводит множество копий одного объекта за один вызов отрисовки, — а bloom остаётся единственным постэффектом.
Генерация сцен кодом держит файлы лёгкими и позволяет слайду менять саму сцену: зажигается свет, толпа двигается в ритме 124 BPM, спираль меняет материал. Кроме того, в колодах нет ни одного лицензированного изображения, у которого может закончиться лицензия или для которого понадобится подпись с указанием автора.
Управление, знакомое по программам для слайдов
Презентация должна выдержать настоящую переговорную, поэтому движок сохраняет привычки, которые у людей уже есть. Стрелки, пробел, PageDown и PageUp переключают слайды — именно эти сигналы отправляет большинство кликеров для презентаций; колесо мыши и свайп делают то же самое. Клавиша O открывает обзор всех слайдов в виде наклонённых карточек на 3D-сетке, F включает полный экран, A запускает автопоказ.
У каждого слайда свой адрес, поэтому менеджер по продажам может отправить ссылку, которая откроется сразу на пятом слайде. На телефонах сцена остаётся в верхней части экрана, а текст слайда уходит в прокручиваемую панель под ней, так что длинные слайды читаются и на узком экране. Отдельный скрипт выводит каждую колоду в PDF 16:9: такой файл годится для вложения в письмо, для печати и для любого, у кого компьютер с трудом справляется с 3D.
Вес и частота кадров: замеры 28 сентября 2026 года
28 сентября 2026 года студия считала кадры через requestAnimationFrame — вызов браузера, который срабатывает один раз при каждом обновлении экрана, — по три секунды на двух слайдах каждой колоды. Тест шёл в headless Chrome на MacBook с чипом Apple M5, в окне 1600 × 1000 при Retina-масштабе. Все 14 замеров показали 60 fps: значения легли между 60,1 и 60,2.
Каждая колода загружает от 235 до 252 КБ JavaScript в сжатии gzip, включая three.js и GSAP. Вся сборка весит 27 МБ, и 14 МБ из них приходятся на семь PDF-версий, которые посетитель скачивает только по запросу. Это лабораторные цифры с одной современной машины: они ничего не говорят о старом офисном ноутбуке или бюджетном телефоне, потому что такие устройства не измерялись.
Когда браузерная колода сильнее PDF, а когда проигрывает
Браузерная колода оправдывает затраты, когда её отправляют ссылкой и открывают на приличном экране: спонсорское предложение, которое должно ощущаться как вечер матча, жилой проект, где продуктом служит само здание, питч, в котором растущий график понятнее статичного. Она выручает и тогда, когда одну и ту же презентацию сначала показывают вживую, а потом пересылают: получатель видит ровно то, что видел зал.
Проигрывает она, когда колоду в основном будут печатать, читать на старом компьютере, совместно править в программе для слайдов или открывать без подключения к интернету. В таких случаях содержание несёт PDF-копия, а классический файл презентации вполне может оказаться лучшим выбором. Честный вопрос, который стоит задать перед заказом, один: где эту колоду на самом деле будут открывать.
Есть и промежуточный путь. Компания может оставить привычный файл презентации для внутренней работы и заказать 3D веб-презентацию только для версии, которая уходит спонсорам, инвесторам или покупателям. Тогда веб-колода становится парадным изданием уже согласованной истории: самая дорогая часть работы получается короткой, и не приходится пересобирать сцены всякий раз, когда в таблице меняется какая-нибудь цифра.
Границы набора: чего концепт не доказывает
Семь колод — это концепт, который показывает формат, а не работа для клиента. Футбольного клуба, стартапа, кольца, башни, космической компании, фестиваля и клиники не существует, поэтому набор ничего не доказывает о привлечённых раундах, проданных спонсорствах или забронированных квартирах. Колоды есть только на русском, а демо намеренно закрыто от поиска, чтобы люди находили страницу кейса, а не само демо.
Частота кадров измерена на одной машине в один день. Настоящий проект добавил бы тестирование на устройствах, которыми на самом деле пользуется аудитория, облегчённый режим для слабых графических чипов и собственные цифры клиента вместо выдуманных.
Материалы, которые стоит собрать до заказа 3D-колоды
Сцена — самая заметная часть такой презентации, но аргумент по-прежнему несут слайды. Работа идёт быстрее, когда клиент приходит с уже выстроенной историей: одна фраза, которую аудитория должна запомнить, пять–семь цифр, которые её доказывают, файлы логотипа и фирменные цвета, а также представление о том, какой объект должна показать сцена, — здание, продукт, площадку или маршрут на карте.
Полезно также заранее решить, кто и где будет показывать колоду. Для показа с ноутбука на проекторе, для рассылки инвесторам по почте и для просмотра с телефона прямо на мероприятии нужен разный объём текста на слайде и разный баланс между сценой и словами.
Практический чеклист
- Запишите, где колоду будут открывать чаще всего: на проекторе, в почтовом ящике или на телефоне.
- Соберите пять–семь цифр, которые презентация должна доказать, и источник каждой из них.
- Выберите один объект для 3D-сцены: площадку, здание, продукт или маршрут.
- Попросите PDF-версию каждой колоды для печати, вложений и медленных компьютеров.
- Перед отправкой ссылки проверьте колоду на самом старом устройстве, какое может оказаться у вашей аудитории.
Вопросы и ответы
Можно ли отправить 3D веб-презентацию в виде PDF?
Да. В наборе VITON13 скрипт выводит каждую колоду в PDF 16:9, поэтому те же слайды можно приложить к письму, распечатать или открыть на машине, которой тяжело даётся 3D, а по ссылке остаётся живая версия.
Работает ли презентация на three.js на телефоне?
У колод есть мобильная вёрстка: сцена держится наверху, а текст слайда переезжает в прокручиваемую панель под ней. Частоту кадров мерили только на MacBook с Apple M5, так что поведение на старых телефонах не проверено.
Использовались ли в семи колодах 3D-модели или стоковые видео?
Нет. Стадион, башня, кольцо, спутник, сцена и спираль ДНК сгенерированы кодом, фотографий и видео в колодах нет. Повторяющиеся объекты вроде кресел и окон рисуются с инстансингом, чтобы сцена оставалась лёгкой.
Как показать такую колоду на встрече?
Откройте ссылку, включите полный экран клавишей F и листайте стрелками, пробелом или кликером, который отправляет PageDown и PageUp. Клавиша O показывает все слайды сразу, а у каждого слайда есть свой адрес для прямой ссылки.
Avrora, NEXORA и другие бренды — настоящие компании?
Нет. Все семь брендов, их цифры, цены, люди и телефоны вымышлены и нужны только для демонстрации формата; об этом говорит заключительный слайд каждой колоды, а студия помечает набор как концепт.