Создание проекта Lamborghini Urus (WebGL/PlayCanvas). Часть 9.

Vasyl Lukianenko 3D Artist and Technical Author

Опубликовано Июнь 12, 2022 Обновлено Июль 25, 2023 6 мин чтения 577

Вы читаете часть: 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.

Все публикации автора