Русский 
Вступление Часть 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}}