3D-анимация на сайте: когда оправдана и чем платит

Анимация на сайте почти всегда производит впечатление на заказчика и почти всегда вызывает вопрос у разработчика: что именно трёхмерная сцена объясняет посетителю. Ответ «выглядит дорого» — рабочий, если продукт сам по себе дорогой и сайт продаёт ощущение качества. Ответ «так у конкурента» — нерабочий: у конкурента, скорее всего, тоже никто не считал, что она даёт.

Дальше — три сценария, где графика окупается, честный порядок её веса и правила, которые позволяют сохранить и скорость, и позиции.

Когда 3D-анимация на сайте действительно работает

Три сценария, где сцена делает то, чего не делает картинка.

Продукт нужно осмотреть. Мебель, оборудование, украшения, техника — всё, что покупатель в офлайне повертел бы в руках. Возможность покрутить объект снимает конкретное возражение, а не украшает страницу.

Продукт нужно разобрать. Показать, что внутри, из каких слоёв состоит, как устроен механизм. Текст на это тратит абзац, разрез — секунду.

Продукт нужно объяснить как процесс. Этапы, превращение, маршрут. Здесь анимация выступает схемой, которую человек считывает быстрее, чем список пунктов.

Во всех трёх случаях у сцены есть работа. Когда описать эту работу коротко не выходит, честнее вложиться в хорошую предметную съёмку — а бюджет пустить на то, что действительно влияет на заявки. Что ещё определяет цену страницы, разобрано в статье сколько стоит сайт.

Сколько весит страница с 3D-сценой

Главное недоразумение вокруг трёхмерной графики — считать, что тяжёлый только движок. Движок предсказуем, а вот модели и текстуры разрастаются незаметно: одна неоптимизированная текстура легко весит больше, чем весь остальной сайт.

Вывод из этой картинки простой: спорить нужно не о том, подключать движок или нет, а о том, что попадает в первую загрузку. Если первый экран открывается без графики вообще, вес сцены перестаёт быть проблемой скорости и становится вопросом аккуратности.

Пять правил, которые спасают проект

Смысловой текст остаётся в разметке. Заголовок, описание услуги, кнопка действия — обычные элементы страницы, а не надписи внутри сцены. Робот такую страницу прочитает, а посетитель со слабым интернетом или отключённым WebGL всё равно увидит смысл, а не пустой прямоугольник.

Сцена подключается отложенно. Тяжёлые библиотеки загружаются только тогда, когда блок со сценой приблизился к экрану. Тот, кто до этого блока не долистал, вес графики вообще не оплачивает.

Для телефонов — облегчённый режим. Плотность пикселей ограничивают, постобработку выключают, число объектов в кадре снижают. На маленьком экране качество от этого почти не проседает, а вот тепловой режим телефона меняется заметно — и чувствует это именно посетитель.

Уважайте системную настройку анимаций. Часть посетителей включает ограничение движения в операционной системе — кто-то из-за укачивания, кто-то из-за вестибулярных нарушений. Для них движение нужно заменить неподвижным кадром, а не оставлять как есть: механика проверки описана в справочнике MDN по prefers-reduced-motion.

Модель готовится к вебу до выкладки. Упрощение сетки, удаление лишних текстур, сжатие: исходник из редактора рассчитан на рендер, а не на мобильный интернет, и разница в весе получается кратной. Что поддерживает движок и в каком формате отдавать геометрию, описано в документации three.js, а как это выглядело на живом проекте — в кейсе лендинга с 3D-сценой.

Как проверить, что не сломали скорость

Проверка занимает несколько минут и делается до сдачи, а не после жалоб.

Первые три строки — это те самые показатели, по которым поисковые системы оценивают удобство страницы; их определения и пороги собраны в руководстве web.dev по Core Web Vitals. Четвёртая строка — про индексацию, и она важнее остальных: страница, текст которой существует только внутри сцены, для поиска пуста.

Чем 3D можно заменить

Часто задачу решает более простой инструмент, и отказ от сцены экономит и бюджет, и скорость.

• Видео вместо интерактива. Если посетителю не нужно управлять объектом, короткий ролик передаёт то же самое и весит предсказуемо.
• Последовательность кадров. Вращение изделия по прокрутке собирается из набора фотографий — выглядит как 3D, работает везде, включая старые телефоны.
• Векторная схема с анимацией. Для процессов и этапов чаще выигрывает у трёхмерной сцены: читается быстрее и весит килобайты.
• Честная предметная съёмка. Для физического товара качественные фотографии почти всегда убедительнее приблизительной модели.

Практическое правило: трёхмерная сцена оправдана, когда посетитель должен что-то сделать с объектом. Если он только смотрит — хватит видео или кадров.

Сроки: из чего складывается работа

Трёхмерная сцена — не одна задача, а четыре последовательные, и каждая может выполняться разными людьми.

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

Второй по затратности этап — последний. Модель, красиво выглядящая в редакторе, почти никогда не готова к вебу: у неё избыточная геометрия и текстуры, рассчитанные на печать, а не на экран телефона. Это нормальный рабочий процесс, а не признак плохой работы художника, — просто закладывать его нужно заранее.

Что заложить в смету

Разработка сцены складывается из четырёх частей, и в смете обычно не хватает двух крайних. Первая — сценарий: кода в нём нет, а календаря он съедает больше всего. Последняя — оптимизация: именно она определяет, откроется ли страница на телефоне. Закладывайте её отдельной строкой — вместе с проверкой на реальном устройстве, а не только в эмуляторе браузера.

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

Как всё перечисленное выглядит на готовом проекте — в кейсе лендинга с интерактивной 3D-сценой: там же видно, что осталось в разметке, а что грузится позже. Если планируете такую страницу, начните с одного предложения о том, какую работу выполняет сцена, — и пришлите его вместе со ссылками на примеры, которые нравятся, через бриф. Что входит в landing page и как мы делаем сайты, можно посмотреть на страницах услуг.