3D-модель мебели на сайте: как добавить просмотр в карточку товара

Зачем мебельному магазину 3D-просмотр в карточке товара

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

Такой показ подходит производителю корпусной мебели, мебельной мастерской и интернет-магазину, у которых есть проект изделия в формате B3D из БАЗИС. Для серийной мебели можно подготовить модель конкретного артикула, а для мебели на заказ — пример конструкции с наполнением и механизмами.

3D-модель дополняет фотографии и описание. На фото удобно показать реальный материал и изделие в интерьере; в интерактивном окне — устройство шкафа, расположение секций и движение фасадов. Это даёт покупателю больше информации для выбора.

Что покупатель сможет делать во встроенном окне

Встроенный 3D-просмотрщик мебели открывается без регистрации покупателя и установки БАЗИС. В верхней части остаётся ссылка на МЕБЕЛЬ VIEW, а управление посвящено самой модели:

• Вращение и масштаб. Можно рассмотреть изделие со всех сторон, приблизить нужный участок и снова вписать модель в окно.
• Анимация. Дверцы и ящики открываются, если движение настроено в исходном B3D. Доступны все блоки или отдельный блок, кнопки открытия, закрытия и паузы, а также ползунок положения.
• AR-примерка в комнате. Кнопка «Посмотреть в комнате» готовит изделие для размещения через камеру совместимого телефона в масштабе 1:1.
• Рентген. Контуры помогают увидеть внутреннее устройство мебели за фасадами и панелями.
• Подсветка крепежа. Распознанная фурнитура выделяется цветом и видна сквозь детали.
• Скрытие окружения. Стены, пол и отдельные 3D-элементы можно скрывать, если они распознаны в проекте.

Покупатель получает компактное окно просмотра. Панели регистрации, загрузки файлов, редактирования проекта и администрирования в нём не появляются. Полноэкранный режим доступен, если его разрешает страница, на которой установлен iframe.

Как покупателю примерить мебель в своей комнате

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

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

Для камеры нужен совместимый телефон и браузер: Safari на iPhone или Chrome на Android с поддержкой AR. Страница магазина должна работать по HTTPS и разрешать AR во вставке. Готовый код MebelView уже содержит нужное разрешение xr-spatial-tracking. Если код был установлен раньше, скопируйте его заново. Если сайт ограничивает запуск, в окне есть ссылка «Открыть примерку отдельно» — она откроет тот же проект в новой вкладке без регистрации.

Как вставить 3D-модель мебели на сайт: пять шагов

1. Подготовьте B3D. Сохраните актуальное изделие в БАЗИС-Мебельщике. Проверьте геометрию и анимацию; уберите из проекта то, что не планируете показывать покупателю. Подробности есть в инструкции по подготовке модели.
2. Загрузите проект в MebelView. Войдите с ролью «Конструктор-технолог», добавьте файл в библиотеку и откройте его. Сверьте результат с оригиналом. При необходимости настройте цвета и текстуры материалов.
3. Нажмите «Вставить на сайт». Кнопка находится в библиотеке у ваших моделей. В окне появятся отдельная ссылка, готовый код iframe и предпросмотр.
4. Скопируйте код. Нажмите «Скопировать код» и вставьте содержимое в HTML-блок страницы товара. Если сайтом занимается разработчик, передайте ему этот код.
5. Опубликуйте страницу и проверьте её. Откройте карточку на компьютере и телефоне, поверните модель, попробуйте анимацию и убедитесь, что кнопки не перекрыты другими элементами сайта.

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

Что такое iframe и куда вставлять код

Iframe — это окно одной веб-страницы внутри другой. Ваш магазин показывает описание, фотографии и условия покупки, а MebelView загружает модель и предоставляет управление просмотром. Создавать собственный 3D-просмотрщик для такого размещения не требуется.

Редактор сайта должен разрешать HTML-код с тегом iframe. Название подходящего блока зависит от системы: это может быть «HTML», «Код» или «Встраивание». Если вставить код в обычное текстовое описание, он может отобразиться как текст. В этом случае используйте HTML-блок или передайте задачу человеку, который обслуживает сайт.

Готовый код задаёт ширину 100% от доступного места и высоту 600 пикселей. Высоту можно изменить в атрибуте height. Оставьте достаточно места для модели и нижней панели управления, особенно в мобильной версии. Сам просмотрщик загружается с MebelView, поэтому для работы окна нужно интернет-соединение и доступ к сервису.

Как обновлять модель и отключать показ

Если изменилось изделие, откройте его карточку в библиотеке и воспользуйтесь кнопкой «Обновить модель». При замене B3D в том же проекте код вставки сохраняется. Исправлять HTML на каждой странице магазина не нужно: посетители получают актуальную редакцию. Уже открытое активное окно проверяет обновление примерно раз в 30 секунд.

После замены файла проверьте страницу товара ещё раз. Название, фотографии, размеры и описание на сайте магазина не меняются автоматически вместе с B3D: их нужно привести в соответствие с новым вариантом отдельно.

Чтобы закрыть просмотр, снова нажмите «Вставить на сайт» и выберите «Отключить вставку». Старый код перестанет открывать проект. Если затем создать новый код, его потребуется заменить на страницах магазина. Обычная ссылка из кнопки «Поделиться» управляется отдельно.

Вставка предназначена для публичного показа: модель доступна каждому, у кого есть её embed-ссылка. Создавайте такой код для проектов, которые готовы показывать посетителям сайта.

Что проверить перед показом мебели покупателям

• Соответствие товару. В модели должны быть те же секции, фасады, ручки и наполнение, что указаны в карточке товара.
• Материалы. Проверьте сохранённые цвета и текстуры. Экран и освещение 3D-сцены могут менять восприятие оттенка; для выбора декора полезны фотографии и образцы.
• Движение. Если кнопки анимации не появились, проверьте её наличие в исходном B3D. Настройка описана в статье об открывании дверей и выдвижении ящиков.
• Удобство на телефоне. Модель должна быть достаточно крупной, а кнопки — доступными. Проверьте опубликованную страницу, а не только редактор сайта.
• Содержимое файла. Подготовьте отдельный демонстрационный проект, если рабочая модель содержит лишние изделия или окружение. Скрытие объектов переключателем меняет вид, но не удаляет их из файла.

Не стоит помещать в один файл весь ассортимент магазина. Отдельный проект товара проще проверить и понятнее покупателю. Если конкретный B3D отображается неправильно, сначала разберитесь с ним по инструкции по ошибкам загрузки, а затем размещайте на сайте.

Чем вставка отличается от обычной ссылки на проект

Вставка на сайт нужна, чтобы клиент рассматривал мебель прямо в карточке товара. В ней оставлены 3D, анимация, рентген, подсветка крепежа и управление видимостью окружения, а также примерка в комнате через AR.

Публичная ссылка подходит для отправки проекта клиенту или сборщику и открывает обычный интерфейс MebelView. Если нужны чертежи, разнесение деталей или поиск панели по QR-бирке, используйте полный просмотр проекта. Эти инструменты не входят во встроенное окно.

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