Розробка проекту Lamborghini Urus (WebGL/PlayCanvas). Частина 9

Vasyl Lukianenko
3D Artist and Technical Author

Дата: Червень 12, 2022 Оновлено: Липень 25, 2023 Час читання: 6 min Перегляди: 477

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

Частина 9

Це Частина 9 із серії уроків зі створення Lamborghini Urus за допомогою WebGL/PlayCanvas.

Для тих, хто не читав попередніх частин, ось демонстративне відео.

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

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

Patreon - 3DGROUND

Скрипт обертання коліс

Скачайте скрипт наведений нижче, викликавши контекстне меню на посилання "view raw" і натиснувши "Save link as...". Додайте скрипт до проекту, перетягнувши файл "wheelRotation.js" на панель "Assets" → "scripts".

Виберіть у "Viewport" об'єкт передніх покришок, потім натисніть в "Inspector" кнопку "Add Component", додайте компонент "Script". Зі списку скриптів "Add Script", виберіть "wheelRotation".

Те саме проробіть для об'єкта задніх покришок та всіх дисків. Важливо застосовувати скрипт саме до об'єктів, а не до шаблонів або "Entity", який вище за ієрархією.

Що зручно, не потрібно робити якісь додаткові налаштування, просто застосовуємо скрипт і все готово.

Натисніть "Play", колеса стали крутитися! За рахунок того, що у нас зміщується текстура і крутяться колеса створюється ефект, що машина справді їде пустелею, хоча вона статична.

Результат

Скрипт відкриття дверей

Завантажте скрипт "openDoors.js" і додайте його в проект в "Assets" → "scripts".

Виберіть у "Viewport" ліві двері і застосуйте до об'єкта скрипт "openDoors", попередньо додавши компонент "Script".

playcanvas script open door settings left door 2

У налаштуваннях скрипта для лівих дверей обов'язково встановіть "axis" рівну "y" і увімкніть прапорець "Inverted".

За аналогією чинимо і з правими дверима. Виділяємо об'єкт у "Viewport", застосовуємо компонент "Script", зі списку вибираємо "openDoors", вказуємо налаштування як на скріншоті нижче.

playcanvas script open doors setting right door

І все те саме для дверей заднього багажника.

playcanvas script open doors settings trunk

Натисніть "Play", коли завантажиться плеєр, натисніть на клавіатурі кнопку 1, у вас відчиняться двері. Пізніше ми зробимо відкриття дверей по кнопці в інтерфейсі.

Як бачите, робота з криптами дуже проста, а завдяки універсальним налаштуванням їх можна застосовувати і в інших проектах.

Результат

Скрипт зміни дисків

Завантажте скрипт "setColor.js" і додайте його до проекту в "Assets" → "scripts".

Застосуйте скрипт до "Entity" - "Discs".

Виберіть "Entity": "SM_WheeDisc_1", "SM_WheeDisc_2", "SM_WheeDisc_3". На панелі "Inspector" і додайте тег "disk". Не забудьте натиснути Enter на клавіатурі, щоб додати тег.

Скрипт зміни кольору Carpaint

Завантажте скрипт "setColor.js" і додайте його до проекту в "Assets" → "scripts".

Застосуйте скрипт до "Entity" - "Car". У налаштуваннях скрипта залиште параметр "Material Tag" рівним за замовчуванням.

Принцип роботи даного скрипта: коли ми генеруємо подію для зміни кольору (натискання кнопки в інтерфейсі), для всіх матеріалів, які мають тег "carpaint", буде змінено колір "Diffuse", на той, який ми будемо передавати безпосередньо через ця подія.

Перейдіть в панель "Assets", у пошуку знайдіть всі матеріали нашого "M_CarPaint....", виділіть ці матеріали і в панелі "Inspector", у формі "Tags", напишіть тег "carpaint ". Не забудьте натиснути Enter на клавіатурі, щоб додати тег.

playcanvas assign tag carpaint to materials

Наступним етапом ми створимо інтерфейс та зв'яжемо натискання кнопок та кольорів.

Створення інтерфейсу

Створіть новий "Entity" на панелі "Hierarchy" з ім'ям "UI". Потім, скачайте скрипт "ui.js" і додайте його в проект в "Assets" → "scripts".

Призначте скрипт "ui" для "Entity" - "UI", додавши компонент "Script" і вибравши зі списку скрипт, що радить.

У цьому скрипті ми створюємо інтерфейс за допомогою HTML коду. Додаючи динамічно необхідні "div" елементи і визначаємо "CSS" стилі.

Ми не будемо докладно описувати весь процес, оскільки це виходить за рамки даного майстер-класу.

Принцип такий, що ми створюємо блок по центру, внизу сторінки, до якого додаємо кнопки зміни кольорів та додаткові кнопки зміни дисків та відкриття дверей.

У цьому масиві ми визначаємо, які кольори кнопок. "color" - це колір для зміни в матеріалі, а "hex" - це шістнадцятковий код кольору HTML кнопки.

var colors = [ {
color: new pc.Color(255.0/255.0, 131.0/255.0, 0/255.0),
hex: "#ff8300"
},
{
color: new pc.Color(82.0/255.0, 176.0/255.0, 0/255.0),
hex: "#52b000"
},
{
color: new pc.Color(17.0/255.0, 74.0/255.0, 151.0/255.0),
hex: "#114a97"
},
{
color: new pc.Color(162.0/255.0, 24.0/255.0, 24.0/255.0),
hex: "#a21818"
}
];

Розмір кнопок задаємо за допомогою цієї змінної.

var buttonSize = '30px';

Кнопки відкриття дверей та зміни колісних дисків. Тут також визначили додаткові властивості, такі як назва кнопки, розмір іконки, сама іконка та назва події, що передається.

var buttons = [ {
name: 'Door',
icon: iconDoor,
iconSize: '90%',
action: 'opendoor',
tag: '',
data: ''
},
{
name: 'Wheel',
icon: iconWheel,
iconSize: 'contain',
action: 'setdisk',
tag: 'disk',
data: ''
}
];

Іконки для кнопок зміни кольору, ми генеруємо динамічно, створюючи квадратний "div" блок з фоном і накладеним поверх "CSS" з напівпрозорим градієнтом. Тут взагалі обійшлися без будь-якої графіки.

Кнопки відкриття дверей і зміни дисків були намальовані в Photopea у векторі, далі збережений як "SVG", потім код з "SVG" був переведений в "CSS" код.

var iconWheel = "url("data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny-ps' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 94' width='94' height='94'%3E%3Ctitle%3Eimage%3C/title%3E%3Cstyle%3E tspan %7B white-space:pre %7D .s0 %7B fill: %23fff %7D %3C/style%3E%3Cpath fill-rule='evenodd' class='s0' d='m47 94c-25.99 0-47-21.01-47-47c0-25.99 21.01-47 47-47c25.99 0 47 21.01 47 47c0 25.99-21.01 47-47 47zm37.82-47c0-20.92-16.91-37.82-37.82-37.82c-20.92 0-37.82 16.91-37.82 37.82c0 20.92 16.91 37.82 37.82 37.82c20.92 0 37.82-16.91 37.82-37.82zm-37.82 33.41c-18.47 0-33.41-14.93-33.41-33.41c0-18.47 14.93-33.41 33.41-33.41c18.47 0 33.41 14.93 33.41 33.41c0 18.47-14.93 33.41-33.41 33.41zm4.72-33.41c0-2.61-2.11-4.72-4.72-4.72c-2.61 0-4.72 2.11-4.72 4.72c0 2.61 2.11 4.72 4.72 4.72c2.61 0 4.72-2.11 4.72-4.72zm-15.08-25.95c0.37 8.16 5.18 14.59 11.06 14.59c5.94 0 10.78-6.55 11.07-14.81c-3.34-1.33-6.99-2.06-10.81-2.06c-4.02 0-7.85 0.81-11.33 2.28zm31.85 8.05c-7.64 2.87-12.28 9.43-10.46 15.03c1.84 5.65 9.56 8.23 17.5 5.96c0.23-3.59-0.2-7.28-1.38-10.92c-1.24-3.82-3.19-7.21-5.66-10.07zm2.18 32.78c-5.09-6.38-12.76-8.76-17.53-5.3c-4.81 3.49-4.87 11.63-0.26 18.49c3.49-0.89 6.87-2.44 9.96-4.68c3.25-2.36 5.87-5.27 7.83-8.5zm-30.5 12.21c4.49-6.82 4.39-14.85-0.37-18.31c-4.81-3.49-12.57-1.04-17.66 5.47c1.92 3.04 4.44 5.78 7.53 8.02c3.25 2.36 6.82 3.96 10.5 4.82zm-21.03-25.24c7.87 2.17 15.48-0.41 17.3-6.01c1.84-5.65-2.9-12.27-10.66-15.11c-2.3 2.77-4.12 6.01-5.3 9.64c-1.24 3.82-1.65 7.71-1.34 11.48z' /%3E%3C/svg%3E")";

var iconDoor = "url("data:image/svg+xml,%3Csvg version='1.2' baseProfile='tiny-ps' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 164 165' width='164' height='165'%3E%3Ctitle%3Ecardoor%3C/title%3E%3Cstyle%3E tspan %7B white-space:pre %7D .s0 %7B fill: %23ffffff %7D %3C/style%3E%3Cpath fill-rule='evenodd' class='s0' d='m60.62 11.98c7.56-7.67 17.88-11.98 28.65-11.98h69.7c2.78 0 5.03 2.25 5.03 5.03v154.94c0 2.78-2.25 5.03-5.03 5.03h-121.71c-7.17 0-13.48-4.74-15.47-11.63l-20.35-70.43c-1.52-5.25-0.08-10.9 3.76-14.79l55.42-56.18zm50.05 81.59c0 3.33 2.7 6.04 6.04 6.04h21.13c3.33 0 6.04-2.7 6.04-6.04c0-3.33-2.7-6.04-6.04-6.04h-21.13c-3.33 0-6.04 2.7-6.04 6.04zm28.12-21.13c2.8 0 5.06-2.28 5.03-5.08l-0.43-41.73c-0.03-2.76-2.27-4.98-5.03-4.98h-44.91c-8.13 0-15.92 3.28-21.6 9.1l-31.67 32.44c-3.73 3.82-1.02 10.25 4.32 10.25h94.28z' /%3E%3C/svg%3E")";

Таким чином, ми не підключали додатково графіку і всі іконки реалізовані у вигляді коду.

Після натискання кнопки зміни кольору ми викликаємо функцію "app.fire", в якій передаємо ім'я події і сам колір. Колір ми беремо динамічно з масиву "colors".

app.fire('setcolor', colors[index].color);

Для відкриття дверей та зміни дисків викликаємо подію динамічно, де беремо ім'я події та параметр тег із масиву "buttons".

app.fire(buttons[index].action, buttons[index].tag);

Таким чином, ми пов'язали інтерфейс з іншими скриптами. І можемо видаляти або додавати нові кольори або кнопки в масивах, не змінюючи сам код скрипту "ui".

Примітка!
Зверніть увагу, що для скрипту "setColor" ми в параметрах вказували самостійно тег, а для скрипту "setDisk" тег передається динамічно через подію. Це зроблено спеціально для демонстрації різних підходів до завдання.

Результат

Висновок

У цій частині ми додали інтерактивність нашій сцені, зробили інтерфейс і проект набуває завершеності. У наступній частині ми покращимо освітлення, тіні і зробимо картинку привабливішою.

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

FAQ

1. Про що ця стаття?

Стаття продовжує розробку проєкту Lamborghini Urus у PlayCanvas та розглядає наступний етап створення інтерактивного автомобільного WebGL-конфігуратора.

2. Що розглядається у Part 9?

У дев'ятій частині описуються нові можливості проєкту, подальша оптимізація, покращення візуальної якості та розвиток користувацького інтерфейсу.

3. Чому проєкт розвивається протягом багатьох частин?

Створення якісного інтерактивного конфігуратора потребує поступового впровадження функцій, тестування та постійного вдосконалення користувацького досвіду.

4. Які завдання зазвичай вирішуються на цьому етапі розробки?

На пізніх етапах основна увага приділяється деталям інтерфейсу, візуальним ефектам, оптимізації продуктивності та додатковим інтерактивним можливостям.

5. Чому важливо покращувати візуальну якість проєкту?

Більш реалістична візуалізація допомагає користувачам краще оцінити продукт і підвищує привабливість презентації.

6. Як оптимізація впливає на користувацький досвід?

Оптимізований застосунок працює швидше, плавніше та забезпечує комфортну взаємодію на різних пристроях.

7. Чи можна додавати нові елементи конфігурації автомобіля?

Так. У процесі розробки можуть додаватися нові кольори, матеріали, варіанти оздоблення та інші параметри налаштування.

8. Чому зручність інтерфейсу має велике значення?

Інтуїтивно зрозумілий інтерфейс допомагає користувачам швидше знаходити потрібні функції та отримувати задоволення від взаємодії з проєктом.

9. Чи підходить PlayCanvas для створення комерційних конфігураторів?

Так. PlayCanvas широко використовується для розробки інтерактивних продуктових презентацій і конфігураторів, які працюють у браузері.

10. Чи можна використовувати подібні технології поза автомобільною галуззю?

Так. Аналогічні рішення успішно застосовуються у сфері нерухомості, електронної комерції, промисловості та дизайну інтер'єрів.

11. Чому важливо підтримувати правильну структуру проєкту?

Добре організована структура спрощує підтримку проєкту, впровадження нових функцій і командну роботу.

12. Чи можуть такі проєкти працювати на мобільних пристроях?

Так. За належної оптимізації WebGL-застосунки можуть ефективно працювати на смартфонах і планшетах.

13. Чи потрібні знання програмування для реалізації складних функцій?

Так. Для створення розширеної логіки та інтерактивних систем зазвичай використовуються JavaScript і PlayCanvas API.

14. Які переваги має інтерактивний конфігуратор порівняно зі звичайними зображеннями?

Користувачі можуть самостійно досліджувати автомобіль, змінювати параметри та отримувати значно більше інформації про продукт.

15. Чи можна продовжувати розвиток проєкту після публікації?

Так. Після запуску можна додавати нові функції, покращувати інтерфейс, оптимізувати продуктивність і розширювати можливості конфігуратора.

16. Для кого буде корисна ця стаття?

Для розробників PlayCanvas, спеціалістів з WebGL, технічних художників, фахівців з автомобільної візуалізації та всіх, хто цікавиться створенням інтерактивних 3D-застосунків.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.