Українська 
Частина 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".
У налаштуваннях скрипта для лівих дверей обов'язково встановіть "axis" рівну "y" і увімкніть прапорець "Inverted".
За аналогією чинимо і з правими дверима. Виділяємо об'єкт у "Viewport", застосовуємо компонент "Script", зі списку вибираємо "openDoors", вказуємо налаштування як на скріншоті нижче.
І все те саме для дверей заднього багажника.
Натисніть "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 ". Не забудьте натиснути
Наступним етапом ми створимо інтерфейс та зв'яжемо натискання кнопок та кольорів.
Створення інтерфейсу
Створіть новий "Entity" на панелі "Hierarchy" з ім'ям "UI". Потім, скачайте скрипт "ui.js" і додайте його в проект в "Assets" → "scripts".
Призначте скрипт "ui" для "Entity" - "UI", додавши компонент "Script" і вибравши зі списку скрипт, що радить.
У цьому скрипті ми створюємо інтерфейс за допомогою HTML коду. Додаючи динамічно необхідні "div" елементи і визначаємо "CSS" стилі.
Ми не будемо докладно описувати весь процес, оскільки це виходить за рамки даного майстер-класу.
Принцип такий, що ми створюємо блок по центру, внизу сторінки, до якого додаємо кнопки зміни кольорів та додаткові кнопки зміни дисків та відкриття дверей.
У цьому масиві ми визначаємо, які кольори кнопок. "color" - це колір для зміни в матеріалі, а "hex" - це шістнадцятковий код кольору HTML кнопки.
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"
}
];
Розмір кнопок задаємо за допомогою цієї змінної.
Кнопки відкриття дверей та зміни колісних дисків. Тут також визначили додаткові властивості, такі як назва кнопки, розмір іконки, сама іконка та назва події, що передається.
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 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".
Для відкриття дверей та зміни дисків викликаємо подію динамічно, де беремо ім'я події та параметр тег із масиву "buttons".
Таким чином, ми пов'язали інтерфейс з іншими скриптами. І можемо видаляти або додавати нові кольори або кнопки в масивах, не змінюючи сам код скрипту "ui".
Примітка!
Зверніть увагу, що для скрипту "setColor" ми в параметрах вказували самостійно тег, а для скрипту "setDisk" тег передається динамічно через подію. Це зроблено спеціально для демонстрації різних підходів до завдання.
Результат
Висновок
У цій частині ми додали інтерактивність нашій сцені, зробили інтерфейс і проект набуває завершеності. У наступній частині ми покращимо освітлення, тіні і зробимо картинку привабливішою.
{{comment.text}}