Створіть свій перший конфігуратор дивана

Створення інтерактивного 3D-конфігуратора дивана може здатися складним, але в Amaspace це зрозумілий процес із підказками на кожному кроці. Цей покроковий посібник допоможе вам створити робочий конфігуратор дивана з кількома матеріалами й кольорами, готовий до розміщення у вашому інтернет-магазині.

Посібник розрахований на продакт-менеджерів, e-commerce-команди та розробників, які вперше налаштовують кастомізацію дивана.

Що ви дізнаєтеся

• Як завантажити базову модель і допоміжні асети
• Як організувати логіку кастомізації за допомогою категорій і атрибутів
• Як прив’язати матеріали й текстури до 3D-моделі
• Як налаштувати правила й логіку, щоб конфігуратором було зручніше користуватися
• Як опублікувати конфігуратор і переглянути його

Крок 1. Створіть новий товар

Натисніть «Create Product» на панелі керування. Додайте основну інформацію про товар: назву, опис, ціну та зображення для попереднього перегляду. Також завантажте базову 3D-модель дивана: це основний асет, на якому працюватиме ваш конфігуратор.

Після створення товар з’явиться у вашому списку. Натисніть на нього, щоб відкрити його внутрішню сторінку.

Крок 2. Завантажте додаткові асети

Тут ви завантажуєте елементи кастомізації, які підготував ваш 3D-художник. У цьому прикладі ми використовуємо два різні матеріали, кожен зі своїми запеченими текстурами. Підтримуються асети трьох типів:

• Model (модель)
• Material (матеріал)
• Texture (текстура)

У цьому посібнику ми працюємо лише з матеріалами. Вони стануть опціями, які можна вибрати в конфігураторі.

Крок 3. Відкрийте 3D Editor

Коли асети завантажено, натисніть кнопку 3D Editor. Тут задаються логіка конфігурації та подача товару. Ви побачите дві основні бічні панелі:

• На лівій бічній панелі ви створюєте й упорядковуєте категорії та атрибути
• На правій бічній панелі ви редагуєте вибраний елемент (наприклад, задаєте значення за замовчуванням або прив’язуєте частини моделі)

Крок 4. Згрупуйте атрибути в категорію

В Amaspace кожен набір налаштовуваних опцій має бути всередині категорії. Так редактор залишається структурованим і зрозумілим. Для цього прикладу створіть категорію з назвою на кшталт «Матеріал і колір дивана».

У цій категорії ви задасте атрибути для кожного варіанта матеріалу.

Крок 5. Створіть атрибути матеріалів

Тепер створіть два окремі атрибути, по одному для кожного матеріалу дивана (наприклад, «Варіанти тканини» і «Варіанти шкіри»). Кожен із них міститиме кілька варіантів кольору чи текстури, з яких вибиратиме клієнт.

Крок 6. Додайте PCO через бібліотеку асетів

Унизу лівої бічної панелі відкрийте Assets Library. Перейдіть на вкладку «Assets» і задайте фільтри:

• «Current product» (поточний товар)
• Тип асета (Asset type): Material

Перетягніть потрібні матеріали у відповідний атрибут. Вони перетворяться на PCO (Product Customization Options). Після додавання можна змінити:

• Вплив на ціну
• Відображувану назву
• Мініатюру
• Вибір за замовчуванням

Крок 7. Прив’яжіть матеріали до моделі

Щоб опції запрацювали, їх потрібно прив’язати до конкретних частин 3D-моделі.

• Виберіть атрибут
• За допомогою Part Picker клікніть на потрібний меш або зону матеріалу на моделі

Завдяки цьому модель оновлюватиметься в реальному часі відповідно до вибору клієнта.

Крок 8. Задайте правила логіки для зручнішого UX

Користувачі не повинні вибирати опції з обох атрибутів одночасно. Для цього створіть правила:

• Кожне правило складається з умови (Condition) (наприклад, «Якщо вибрано тканину»)
• і дії (Action) (наприклад, «Встановити для атрибута шкіри значення none»)

Правило потрібне для кожної конфліктної комбінації. Так одночасно активна лише одна група, і клієнт не отримає суперечливу конфігурацію.

Щоб працювати швидше, дублюйте наявні правила й редагуйте копії.

Крок 9. Налаштуйте камеру в Scene Editor

Щоб товар виглядав якнайкраще, відкрийте 3D Scene Editor.

• Відкрийте розділ «Camera» на правій бічній панелі
• Виберіть вид Configurator
• Налаштуйте положення камери мишею або трекпадом
• Коли знайдете вдалий ракурс, натисніть «Save»

Так користувачі одразу бачать товар у правильному ракурсі, щойно сторінка завантажиться.

Крок 10. Увімкніть стандартне оточення

У тому самому редакторі увімкніть перемикачем стандартне 3D-оточення. Воно додає навколо товару простір із дзеркальною підлогою, і модель виглядає реалістичніше.

Крок 11. Опублікуйте товар

Поверніться в редактор товару й натисніть Manage → Publish. Після цього конфігуратор стане доступним для живого перегляду й тестування.

Крок 12. Перегляньте й протестуйте

Переберіть групи матеріалів і доступні текстури. Ви побачите, як оновлюється ціна, як модель реагує на кожен вибір і як правила логіки блокують неприпустимі комбінації.

Підсумок

За кілька кроків ви створили робочий 3D-конфігуратор дивана, у якому є:

• Дві групи матеріалів
• Оновлення моделі в реальному часі
• Власна логіка ціноутворення
• Простий і зручний інтерфейс

Це налаштування можна повторно використовувати як шаблон для інших типів товарів у вашому каталозі. Якщо хочете доповнити конфігуратор переглядом в AR або інтеграцією з шоурумом, перегляньте інші посібники в наступному розділі.