Додання інтерактивності інтер'єру SVOYA (Playcanvas/WebGL). Частина 2
Вступ
Це 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 у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.
Для всіх інших все необхідне знайдете на сторінці цього уроку.
PatreonFAQ
1. Про що ця стаття?
2. Чим Part 2 відрізняється від Part 1?
3. Чи потрібно проходити Part 1 перед вивченням Part 2?
4. Які нові можливості додаються у другій частині?
5. Чи можна використовувати ці рішення у власних проєктах?
6. Чи підходить цей підхід для інтер'єрних конфігураторів?
7. Чи можна створювати власні елементи інтерфейсу?
8. Чи допомагає інтерактивність покращити презентацію проєкту?
9. Чи можна змінювати об'єкти в режимі реального часу?
10. Наскільки важлива оптимізація при додаванні нових функцій?
11. Чи можна використовувати такі проєкти на мобільних пристроях?
12. Чи підходить PlayCanvas для комерційних проєктів?
13. Чи потрібно знати JavaScript для реалізації складної логіки?
14. Чи можна розширювати проєкт після публікації?
15. Які переваги дають інтерактивні WebGL-презентації?
16. Для кого буде корисна ця стаття?
Останні статті
{{comment.text}}