Добавление интерактивности интерьеру 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” - это кнопка которая будет активировать смену цветов.
В параметре “Colors” укажите цифру, сколько будет цветов.
Далее, настройте цвета.
Готово! Запустите проект, у вас должны меняться цвета по нажатию кнопки “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}}