Додання інтерактивності інтер'єру SVOYA (Playcanvas/WebGL). Частина 5
Вступ
Це остання частина 5 з 5 серії уроків з додавання інтерактивності інтер'єру SVOYA Apartment.
Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури, скрипти та інше, ви можете отримати підписку на Patreon.
PatreonПереглянути Playcanvas проект онлайн.
View Playcanvas Project OnlineПоліпшення loading.js
Я допрацював “Start Screen” і зробив деякі зміни, наприклад:
- Назва проекту тепер адаптується під розмір екрана;
- Для Desktop версії можна відображати кнопки керування (W, A, S, D, Миша);
- Для Mobile версії кнопки керування ховаються автоматично;
- Додані деякі налаштування керуванням розміру шрифту, приховування другої лінії назви проекту тощо;
- Оптимізовано код;
- І інші незначні зміни.
Скрипт "loading.js".
Додайте скрипт до проекту, замінивши старий. Відкрийте скрипт подвійним клацанням на нього.
Тепер деякі налаштування винесені вгору скрипту. Наприклад, можна змінити назву проекту “projectNameLine1” та приховати другу лінію під назвою, залишивши порожнім значення “projectNameLine2”.
"fontWidth" і "controlsSize" відповідають за розміри тексту та картинки з кнопками управління. А за допомогою "showControlsUsage" можна зовсім заховати картинку кнопок управління, встановивши в "false".
Варто зазначити, що значення "vw" це відсоткове співвідношення по ширині, наприклад "10vw" - це 10% від ширини екрана. А "vh" це відсоткове співвідношення по висоті, наприклад "8vh" - це 8% від висоти екрану .
Якщо вам потрібно допомогти з редагуванням даного скрипта, пишіть мені в Patreon.
Результат виконаної роботи ви можете переглянути за посиланням.
View Playcanvas Project OnlineВисновок
На закінчення серії уроків SVOYA Apartment ми хочемо висловити подяку всім нашим учням за їхню завзятість та творчий підхід до створення приголомшливих інтер'єрів. Ми впевнені, що наші уроки допомогли вам розкрити свій потенціал та навчитися створювати рівні будь-якої складності.
Більше того, ви тепер можете використовувати наш проект як шаблон для створення власних неймовірних проектів інтер'єрної візуалізації. Ми сподіваємося, що вам сподобалася наша серія уроків та бажаємо вам подальших успіхів у вашій творчій роботі!
Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.
Для всіх інших все необхідне знайдете на сторінці цього уроку.
PatreonFAQ
1. Про що ця стаття?
2. Що розглядається у Part 5?
3. Чи потрібно пройти попередні частини перед Part 5?
4. Чому важливо розвивати інтерактивний проєкт поетапно?
5. Чи можна використовувати показані техніки в інших проєктах?
6. Чи зосереджена Part 5 на покращенні користувацького досвіду?
7. Чи можна створювати власні елементи інтерфейсу?
8. Чи можуть користувачі взаємодіяти з елементами сцени в реальному часі?
9. Чому оптимізація залишається важливою?
10. Чи можуть проєкти PlayCanvas працювати як на комп'ютерах, так і на мобільних пристроях?
11. Чи підходить PlayCanvas для створення конфігураторів і презентацій інтер'єрів?
12. Чи можна продовжувати розширювати функціональність після публікації?
13. Чи потрібні навички програмування для створення складної інтерактивності?
14. Чи можуть ці рішення покращити комерційні презентації?
15. Які переваги дають інтерактивні WebGL-проєкти?
16. Для кого буде корисна ця стаття?
Останні статті
{{comment.text}}