Купить очки онлайн без примерочной сложно. Именно поэтому мы создали Sunglasses Slider: простой примерочный WebAR-сервис, позволяющий за считанные секунды перебрать несколько оправ и выбрать подходящую. Он работает в браузере, поэтому не требует установки приложений и специальной настройки.
Что вы будете готовить
Вам понадобятся четыре лёгкие 3D-модели солнцезащитных очков в формате .glb и четыре соответствующих миниатюры (по одной на каждую модель). Если вы просто экспериментируете, скачайте образцы моделей на Sketchfab. Файлы должны быть лёгкими, чтобы телефоны не зависали.
Шаг 1 — сбор 3D-моделей
Зайдите на Sketchfab, найдите «солнечные очки» и скачайте четыре модели в формате .glb. Дайте им понятные названия: classic_black.glb, retro_tortoise.glb, sport_mirrored.glb и т. д.
Шаг 2 — создание миниатюр
Откройте веб-просмотрщик, например glTF Viewer. Загрузите каждый файл .glb, поверните его под удобным углом, сделайте снимок экрана и сохраните в формате PNG или JPG размером 512×512 пикселей. Назовите их в соответствии с моделями, например, classic_black_thumb.png.
Шаг 3 — создайте проект в MyWebAR
Авторизуйтесь, нажмите «Создать». Project и выберите тип отслеживания «Фильтры и эффекты для лица». Откройте редактор. Функция отслеживания лица автоматически разместит кадры на голове, так что вам не придётся ничего выравнивать вручную.
Шаг 4 — добавьте плагин
В левой боковой панели откройте «Расширения», найдите плагин Sunglasses Slider и установите его. Затем перейдите в раздел «Объекты» и нажмите «+», чтобы добавить плагин в сцену.
Шаг 5 — настройка слайдера
Для каждого слайда загрузите модель .glb и соответствующую миниатюру. Сделайте это для всех четырёх кадров. Когда всё будет выглядеть правильно, нажмите «Сохранить конфигурацию».
Шаг 6 — опубликуйте и попробуйте
Нажмите «Опубликовать», чтобы опубликовать. Откройте ссылку на телефоне и протестируйте, как настоящий покупатель: переключайтесь между оправами, проверяйте посадку и смотрите, как изделие выглядит при разном освещении.
Вот пример, который вы можете изучить:
Почему командам нравится этот поток
Он работает в любом современном мобильном браузере, не требует написания кода, а замена моделей или миниатюр занимает считанные минуты. Покупатели могут быстро сравнивать несколько кадров, что избавляет от необходимости сомневаться и ускоряет принятие решений.
Быстрые решения, если что-то не так
Если модель выглядит огромной или крошечной, переэкспортируйте GLB в правильном масштабе и попробуйте ещё раз. Если материалы выглядят некорректно, убедитесь, что текстуры упакованы в GLB. Если старые телефоны работают с задержками, упростите геометрию или уменьшите размер текстур.
Вот и вся схема. Четыре модели, четыре миниатюры, одна публикация. Получается чистая примерка дополненной реальности, которая выглядит естественно и проста в обслуживании.
