Автор: MastaMan
Дата: Квітень 4, 2023
Оновлено: Липень 25, 2023
Ви читаєте частину: 1 2 3 4 5

Вступ

Це 2 частина з 5 серії уроків з додавання інтерактивності до інтер'єру SVOYA Apartment.

Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури, скрипти та інше, ви можете отримати підписавшись на Patreon.

Patreon

Переглянути Playcanvas проект онлайн.

View Playcanvas Project Online

Зміна кольорів шаф за натисканням кнопки UI

Налаштування UI елементів

Створіть папку “configurator” у “scripts” панелі “Assets”.

create configurator folder in scripts
Loading...

Додати картинку Щітки.

paint
Loading...
add paint image to assets
Loading...

Для того, щоб не створювати з нуля однакові кнопки, ми просто дублюватимемо існуючі.
Зробіть дублікат кнопки “PlayPause”, назвіть нову кнопку “ChangeColor”, картинку назвіть “PaintImage”. Зніміть картинку “PauseImage”.

suit change color button
Loading...

В якості зображення "PaintImage" виберіть "paint.png".

change color button in viewport
Loading...

Розмістіть кнопку “ChangeColor” біля об'єкта шаф, як показано на зображенні нижче.

move button to desired object
Loading...

Кнопка готова, залишилося додати скрипт зміни кольорів.

Застосування та налаштування скрипта changeColor

Додайте скрипт “change-color.js” до папки “scripts/configurator”.

Скрипт "change-color.js".



add script change color to assets
Loading...

Застосуйте скрипт до бажаного об'єкта, у нашому випадку це “Cabinet”. Для цього виберіть об'єкт, додайте “Component” “Script” і зі списку виберіть “changeColor”.

select script change color
Loading...
Примітка!
Слід зазначити, що скрипт змінюватиме кольори “Diffuse“ у матеріалі, тому у “Lightmap” матеріалу має бути чорно-біла текстура запечених тіней.

Налаштування матеріалу "Cabinet_2048".

cabinet 2048 material settings
Loading...

У налаштуваннях скрипту “changeColor”, вкажіть матеріал, для якого змінюватиметься колір у параметрі “Material”.
Обов'язково вкажіть “Trigger Button” - це кнопка яка активуватиме зміну кольорів. скільки буде кольорів. Далі, налаштуйте кольори.

setup script change colors
Loading...

Готово! Запустіть проект, у вас повинні змінюватися кольори після натискання кнопки “ChangeColor”.

result configurator playcanvas change color for material
Loading...

Висновок

У цій частині уроку ми зробили простий конфігуратор зміни кольорів матеріалу.

Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.

Для всіх інших все необхідне знайдете на сторінці цього уроку.

Patreon


Ви читаєте частину: 1 2 3 4 5
{{commentsMsg}}
  

Ніхто не залишив коментарів
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content