Вступ
Це 2 частина з 5 серії уроків з додавання інтерактивності до інтер'єру SVOYA Apartment.
Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури, скрипти та інше, ви можете отримати підписавшись на Patreon.
PatreonПереглянути Playcanvas проект онлайн.
View Playcanvas Project OnlineСтворіть папку “configurator” у “scripts” панелі “Assets”.
Додати картинку Щітки.
Для того, щоб не створювати з нуля однакові кнопки, ми просто дублюватимемо існуючі.
Зробіть дублікат кнопки “PlayPause”, назвіть нову кнопку “ChangeColor”, картинку назвіть “PaintImage”. Зніміть картинку “PauseImage”.
В якості зображення "PaintImage" виберіть "paint.png".
Розмістіть кнопку “ChangeColor” біля об'єкта шаф, як показано на зображенні нижче.
Кнопка готова, залишилося додати скрипт зміни кольорів.
Додайте скрипт “change-color.js” до папки “scripts/configurator”.
Скрипт "change-color.js".
Застосуйте скрипт до бажаного об'єкта, у нашому випадку це “Cabinet”. Для цього виберіть об'єкт, додайте “Component” “Script” і зі списку виберіть “changeColor”.
Примітка!
Слід зазначити, що скрипт змінюватиме кольори “Diffuse“ у матеріалі, тому у “Lightmap” матеріалу має бути чорно-біла текстура запечених тіней.
Налаштування матеріалу "Cabinet_2048".
У налаштуваннях скрипту “changeColor”, вкажіть матеріал, для якого змінюватиметься колір у параметрі “Material”.
Обов'язково вкажіть “Trigger Button” - це кнопка яка активуватиме зміну кольорів. скільки буде кольорів. Далі, налаштуйте кольори.
Готово! Запустіть проект, у вас повинні змінюватися кольори після натискання кнопки “ChangeColor”.
Висновок
У цій частині уроку ми зробили простий конфігуратор зміни кольорів матеріалу.
Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.
Для всіх інших все необхідне знайдете на сторінці цього уроку.
Patreon