model-viewer: 3D-просмотр и AR-примерка товара «поставь в комнату»

Главная боль онлайн-торговли в том, что товар нельзя потрогать. Покупатель смотрит на плоские фотографии и пытается представить, как кресло впишется в его гостиную, поместится ли комод в нишу и какого на самом деле размера эта настольная лампа. Эта неопределённость тормозит решение о покупке и оборачивается возвратами «на фото выглядело иначе». 3D-просмотр и дополненная реальность (AR) снимают часть этих сомнений: товар можно покрутить со всех сторон прямо в браузере, а с телефона — буквально поставить его в свою комнату и оценить в реальном масштабе. Раньше это считалось дорогой технологией для крупных брендов, но open-source инструмент model-viewer от Google сделал её доступной почти любому магазину. Ниже разберу, что это за инструмент, что он умеет, кому подходит и что нужно, чтобы внедрить его у себя.

Что такое model-viewer и зачем он бизнесу

model-viewer — это бесплатный открытый веб-компонент, который разработала и поддерживает компания Google. Если упростить, это готовый «кубик», который добавляется на страницу сайта парой строк кода и превращает обычную картинку товара в интерактивную 3D-модель. Посетитель наводит курсор или палец и вращает товар, приближает, рассматривает детали со всех сторон — примерно так же, как он вертел бы вещь в руках в обычном магазине.

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

Важно понимать, чем model-viewer отличается от более тяжёлых решений. Это не игровой движок и не полноценная 3D-среда вроде Three.js, где можно построить сложную интерактивную сцену с анимацией, физикой и кастомной логикой. model-viewer сознательно сделан простым: его задача — показать одну модель товара, дать её повертеть и поставить в AR. За эту простоту вы платите гибкостью, зато получаете результат быстро и почти без программирования. Для типовой карточки товара этого достаточно с запасом, а если когда-нибудь понадобится сложный конфигуратор, всегда есть путь к Three.js.

Что умеет: 3D-вращение и AR в комнате

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

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

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

Отдельно стоит сказать про формат моделей. model-viewer работает с glTF — это современный открытый стандарт 3D для веба, своего рода «JPEG для трёхмерной графики». Модели в этом формате компактны и быстро загружаются, что важно для карточки товара, где скорость напрямую влияет на конверсию. Сами модели обычно готовят в редакторе вроде Blender либо получают из фотограмметрии (когда реальный товар отснимают со всех сторон и собирают в 3D), после чего экспортируют в glTF.

Кому и для каких задач подходит

В первую очередь 3D и AR-просмотр выгоден магазинам мебели и предметов интерьера. Здесь цена ошибки высокая: диван или шкаф трудно вернуть, а решение покупатель принимает долго, мысленно «примеряя» вещь к своей квартире. Возможность поставить товар в свою комнату с телефона прямо отвечает на главный вопрос «а впишется ли это ко мне» и заметно повышает уверенность перед покупкой.

Хорошо ложится технология и на товары для дома и декор: светильники, ковры, вазы, постеры, посуда, растения в кашпо. Всё, что важно «увидеть в обстановке» и оценить по размеру и стилю, выигрывает от объёмного просмотра. Покупатель перестаёт гадать по фото и видит вещь так, как она будет выглядеть на самом деле.

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

Полезен инструмент и обычной рознице с онлайн-витриной: магазинам техники, спорттоваров, инструментов, аксессуаров. Везде, где покупателю важно понять реальный размер и форму вещи, 3D-просмотр снижает долю возвратов из-за несоответствия ожиданиям. Общий знаменатель простой: если ваш товар покупают глазами и часто сомневаются «а как оно на самом деле» — объёмный просмотр и AR работают на вас.

Что нужно для запуска: 3D-модель и страница

Главное, без чего не обойтись, — это 3D-модель самого товара в формате glTF. Компонент лишь показывает модель, но не создаёт её. Поэтому первый и самый важный шаг — получить качественную модель: либо смоделировать товар в редакторе вроде Blender, либо отснять реальный предмет методом фотограмметрии и собрать из снимков. От качества модели напрямую зависит, насколько убедительно товар будет выглядеть на экране и в AR.

Вторая часть — встраивание на страницу. Сам model-viewer подключается буквально несколькими строками кода: подгружается компонент, указывается путь к модели — и блок с 3D-просмотром появляется в карточке. В этом смысле порог входа низкий, и это сильная сторона инструмента. Сложность не в коде, а в подготовке моделей и в аккуратной интеграции в дизайн вашего сайта или платформы магазина.

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

Ещё один момент — вес и скорость. Хорошая модель должна быть детальной, но при этом достаточно лёгкой, чтобы карточка не загружалась медленно. Это вопрос грамотной подготовки и оптимизации glTF: найти баланс между качеством и скоростью, чтобы 3D не отпугивал покупателей долгой загрузкой, а наоборот, удерживал.

Как внедрить под ключ

На словах всё звучит просто: добавить компонент и подключить модель. На практике результат складывается из нескольких этапов, и каждый влияет на то, будет ли функция продавать или останется красивой игрушкой. Нужно подготовить или оптимизировать 3D-модели товаров, настроить освещение и ракурсы, аккуратно встроить просмотр в дизайн карточки, проверить поведение на разных телефонах, корректно обработать случаи, когда AR недоступен, и убедиться, что всё быстро грузится. Для человека без опыта работы с 3D и вебом это много разрозненных задач.

Я беру эту работу на себя. Помогаю получить или подготовить модели в формате glTF (в том числе через Blender или фотограмметрию), оптимизирую их по весу, встраиваю 3D и AR-просмотр в карточку товара на вашем сайте или платформе, настраиваю внешний вид и подсказки для покупателя, проверяю работу на реальных устройствах и передаю готовую функцию с инструкцией. Если задача выходит за рамки простого просмотра — например, нужен конфигуратор с выбором цвета или сложная интерактивная сцена — подключаю более гибкие инструменты вроде Three.js под конкретный сценарий.

За плечами 16+ лет в IT и опыт внедрения open-source решений под реальные задачи бизнеса. Если вы хотите дать покупателям возможность повертеть товар в 3D и поставить его в свою комнату с телефона — подключу 3D и AR-просмотр товара под ключ, а вы получите более убедительную карточку и меньше возвратов из-за несоответствия ожиданиям.

Частые вопросы

Нужно ли покупателю устанавливать приложение, чтобы посмотреть товар в AR? Нет. И 3D-просмотр, и режим «поставить в комнату» работают прямо в браузере телефона. Покупатель открывает карточку, крутит модель и при поддержке устройства запускает примерку в своём пространстве без установки чего-либо.

Откуда взять 3D-модель товара? Модель либо создаётся в редакторе вроде Blender по чертежам и фотографиям, либо собирается из снимков реального предмета методом фотограмметрии. Готовую модель экспортируют в формат glTF, с которым работает model-viewer. Подготовку моделей я тоже беру на себя.

На всех ли телефонах работает примерка в комнате? Нет, режим AR зависит от устройства и браузера, и на части старых телефонов он может быть недоступен. В таких случаях покупатель всё равно увидит обычный 3D-просмотр с вращением. На большинстве современных смартфонов примерка работает.

Чем это отличается от полноценной 3D-разработки на Three.js? model-viewer проще и быстрее внедряется, но менее гибок: он показывает одну модель и даёт AR, без сложной интерактивной логики. Если нужен конфигуратор или нестандартная сцена, под такой сценарий используют Three.js. Для типовой карточки товара возможностей model-viewer обычно достаточно.

Замедлит ли 3D загрузку карточки товара? При грамотной подготовке — нет. Модели в формате glTF оптимизируют по весу, находя баланс между качеством и скоростью. Цель в том, чтобы 3D добавлял ценность, а не отпугивал покупателей долгой загрузкой, и эту оптимизацию я делаю на этапе внедрения.

Коротко о главном

model-viewer — это открытый инструмент от Google, который добавляет в карточку товара объёмный 3D-просмотр и режим AR «поставить в комнату» с телефона. Покупатель крутит вещь со всех сторон и видит её в реальном масштабе в своём пространстве — это снижает сомнения перед покупкой и долю возвратов из-за несоответствия ожиданиям. Технология особенно полезна магазинам мебели и декора, селлерам на маркетплейсах и рознице с онлайн-витриной. Для запуска нужна 3D-модель товара в формате glTF и аккуратная интеграция на страницу; стоит помнить, что AR работает не на всех устройствах, а сложные сцены лучше делать на Three.js с моделями из Blender. Подготовку моделей и внедрение проще доверить специалисту, чтобы сразу получить рабочую функцию, которая помогает продавать, а не набор файлов из репозитория.