АННОТАЦИЯ 2
Перечень условных обозначений 4
Введение 5
1 Анализ 7
1.1 Варианты использования системы 7
1.2 Анализ существующих решений 8
1.3 Используемые инструменты разработки 11
1.3.1 Управление состоянием приложения 13
1.3.2 Библиотека компонентов 15
2 Библиотека Three.js 16
2.1 Сравнение Three.js с аналогами 17
2.2 Архитектура Three.js 19
2.3 Сцена в Three.js 21
2.4 Работа с камерой 21
2.5 Освещение сцены 24
2.6 Определение формы объекта 26
2.7 Материалы и текстуры Three.js 27
2.8 Инструмент визуализации 28
2.9 Инициализация трехмерной сцены 29
2.10 Вращение объекта на сцене 31
3 Реализация 33
3.1 Процесс создания 3В-модели логотипа 33
3.2 Преобразование SVG в 3D посредством Экструзии 34
3.2.1 Формат SVG 34
3.2.2 Преобразование SVG путей 34
3.2.3 ExtrudeGeometry 36
3.2.4 Процесс получения Mesh с помощью ExtrudeGeometry 37
3.3 Экспорт 38
3.3.1 Экспорт в PNG 38
3.3.2 Экспорт в GLTF 40
3.4 Параметры редактирования 42
3.4.1 Изменение цвета 42
3.4.2 Изменение силы выдавливания и силы сглаживания 44
3.4.3 Изменение сдвига 45
3.4.4 Изменение цвета фона 46
3.4.5 Наложение текстуры 46
3.5 Экструзия растрового логотипа 48
3.5.1 Форматы PNG, JPG 48
3.5.2 Библиотека Potrace 49
3.6 Страницы приложения 52
Заключение 55
Литература 56
В современном мире визуальное представление объектов вокруг нас играет большую роль. Например, в таких сферах, как маркетинг или дизайн, часто используют в качестве уникального знака - логотип. В последнее время SD-графика все больше и больше внедряется в наше визуальное окружение. Просмотр 3D объектов намного более разнообразен, чем просмотр двумерных изображений. Можно изменить ракурс, изменить освещение объекта или его текстуру. Так, например, использование трехмерного логотипа на веб-сайте часто является более выигрышным решением для привлечения внимания. Такой логотип поможет выделиться на фоне конкурентов, которые используют 2D изображения.
Однако наряду с яркой визуальной составляющей сам процесс создания 3D объекта достаточно сложен и требует специальных знаний в области 3D графики, дизайна или программирования. В связи с этим зачастую приходится обращаться к специалистам в данных областях. Для начала к дизайнерам, чтобы они создали трехмерную модель в специальном приложении для работы с 3D графикой, например, в программе Blender. Затем к программистам, которые поместят готовую модель на сайте, настроив параметры сцены и анимации.
Основной проблемой этого вопроса на данный момент является отсутствие удобных и качественных автоматизированных средств для создания трехмерных логотипов из двумерных. Существуют лишь решения, результат и скорость работы которых малы и не позволяют пользователю с удобством использовать их. Также низкое качество результатов работы таких веб-приложений создает проблему для пользователей, например, компаний или дизайнеров, которые хотели бы использовать трехмерные логотипы у себя на сайте, но не имеют возможности и времени для их создания.
Разработка веб-приложения для преобразования двумерных логотипов в трехмерные упростит работу многим людям, потому что данный инструмент позволит им легко создавать и настраивать такие логотипы, не 5
требуя особых навыков, времени и денег. То есть данный инструмент не только будет доступным любым пользователям, но и предоставит возможность брендам усилить свою визуальную идентичность.
Целью данной работы является разработка веб-приложения для преобразования 2D логотипов в трехмерные с помощью библиотеки ThreeJS.
Для достижения выбранной цели были поставлены следующие задачи:
1. Определить требования к функционалу разрабатываемого приложения.
2. Сравнить с существующими аналогами (сравнение функционала, удобства и интуитивности интерфейса)
3. Разработать веб-приложение.
Разрабатываемое веб-приложение автоматизирует процесс
преобразования логотипов из двумерных в трехмерные. Кроме того, пользователи смогут редактировать трехмерный логотип на сцене или просто взаимодействовать с ним, рассматривая с разных ракурсов. Также будет возможен экспорт в удобных для дальнейшей работы форматах, который позволит получить либо качественное изображение, либо модель с настройками сцены. Помимо этого результат работы приложения может служить основой для дизайнеров, которые смогут доработать его в профессиональных приложениях, если им это потребуется.
В ходе выполнения данной дипломной работы была достигнута основная цель - разработка веб-приложения для преобразования 2D логотипов в трехмерные с помощью библиотеки Three.js.
Разработанное приложение предоставляет пользователям возможность легко и быстро создавать логотипы. Оно не требует от них глубоких знаний и навыков в области моделирования. Были проведены анализ и определение основных требований к функционалу веб-приложения, что позволило создать удобный и интуитивно понятный интерфейс для пользователей.
Проведен анализ аналогичных решений на рынке, что позволило выявить преимущества и недостатки конкурирующих продуктов, и разработать приложение, которое отличается высокой производительностью и широкими возможностями по настройке создаваемых SD-логотипов.
В результате была разработана основная структура приложения с использованием библиотеки Three.js, реализованы функции для создания SD- логотипов, такие как преобразование SVG-файлов в SD-объекты, их экструзия и дальнейшая настройка. Кроме того, в приложение были интегрированы различные параметры редактирования, такие как изменение цвета, силы выдавливания, сглаживания и сдвига объектов, что позволяет пользователям легко настроить внешний вид SD-логотипа в соответствии с их требованиями.
Были реализованы функции экспорта SD-логотипов в различные форматы, такие как PNG и GLTF, что обеспечивает возможность использования созданных объектов в других приложениях и на веб-сайтах.
