Мы с важной новостью: с 28 февраля 2025 года сервис Хабр Фриланс прекратит свою работу.

Купить услуги можно до 28 февраля 2025, но пополнить баланс уже нельзя. Если на вашем счете остались средства, вы можете потратить их на небольшие услуги — служба поддержки готова поделиться бонусами, на случай, если средств немного не хватает.
R50 2f80266b7b2884634d957b467be84e3d
Мобильные приложения

Разработка Web-приложения на Three.JS

Добавлено 22 окт 2024 в 18:36
Проектирование 3D-моделей для web-приложения — это уже серьезный вызов, а реализация полноценного приложения для проектирования саун на GrassHopper и Three.JS оказалось почти невозможной задачей. Заказчик, ООО "Техноснег", пришел к нам с амбициозной идеей создать интерактивное web-приложение, которое бы позволило B2C-клиентам в деталях спроектировать собственную сауну, начиная от материалов и размеров до выбора оборудования и фурнитуры. Задача Нашей целью было не только создать приложение для создания 3D-моделей саун, но и обеспечить полноценную визуализацию с высокой степенью кастомизации. Основные сложности заключались в том, что:
  1. Комплексность визуализации и детализации: Для точной передачи всех деталей сауны и материалов необходимо было работать на GrassHopper и Three.JS, при этом сложность состояла в ограничениях этих технологий. GrassHopper не поддерживает некоторые из ключевых функций для создания полной визуализации помещений. Однако, мы настроили уникальные схемы работы, чтобы преодолеть эти препятствия, и разработали пользовательские функции, необходимые для построения моделей саун.
  2. Реализация сложных элементов: Наш проект требовал возможности выбора и визуализации различных материалов — от дерева и керамической плитки до камня и солевых кирпичей. Мы настроили уникальное текстурирование материалов, учитывая нюансы их визуализации, чтобы пользователи могли увидеть реалистичное представление своей будущей сауны. В этом аспекте использовались кастомные шейдеры и настройка освещения для достоверной передачи эффектов текстуры.
  3. Полная кастомизация в режиме реального времени: Визуализация и интерактивность — ключевые особенности этого проекта. Пользователи должны были получить возможность выбирать и устанавливать элементы, такие как полки, двери и печи, и видеть это в реальном времени. Для этого мы внедрили интеграцию с видовым кубом и функциями, как масштабирование, вращение и переключение между видами.
  4. Мультиязычный и кросс-платформенный интерфейс: Для удобства использования нашим клиентам требовалось обеспечить поддержку русского и английского языков, а также адаптировать приложение для всех видов устройств. Это усложнило разработку, так как добавлялось много дополнительных проверок и настроек.
  5. Серверная оптимизация и разработка библиотек: Чтобы приложение обрабатывало запросы пользователя в реальном времени и предоставляло точные результаты, мы разработали мощную серверную инфраструктуру, оптимизированную для быстрой обработки 3D-геометрии. Также были созданы специализированные библиотеки "Материалы", "Оборудование" и "Готовые проекты", которые поддерживают добавление и удаление элементов для будущих обновлений.
Реализация Мы начали с продуманной архитектуры, чтобы задать основу приложения. В течение 8 недель команда разработала ряд уникальных решений, чтобы обойти ограничения программного обеспечения:
  • Разработка сложных текстур и освещения: Мы работали с передовыми методами текстурирования и освещения для реалистичного отображения материалов, включая зеркальные и матовые поверхности.
  • Уникальная логика отображения: Параметры, которые пользователи вводят, автоматически визуализируются в 3D-модели, позволяя им видеть изменения в режиме реального времени.
  • Адаптация под любые устройства: Приложение поддерживает десктопные и мобильные устройства, обеспечивая одинаково удобное и интуитивное взаимодействие на всех платформах.
  • Интеграция функции «Cull BackFaces»: Мы применили эту технику для скрытия внешних стен, что позволило пользователям лучше видеть внутреннюю часть модели и оценить все элементы сауны.
Результат В результате получилось высокоинтерактивное приложение, доступное на всех устройствах, позволяющее пользователям без опыта в 3D-моделировании создавать и настраивать сауну под свои предпочтения. Кроме этого, у пользователей есть возможность выгрузить чертежи и спецификации на материалы и оборудование. Пользовательская поддержка и подсказки встроены, что позволяет клиентам с легкостью использовать приложение. Для нас проект стал настоящей проверкой и требовал на каждом этапе работы нестандартного подхода. Тем не менее, с таким проектом мы не просто создали удобное приложение для клиентов, но и выработали новые подходы, которые теперь можем применять для других сложных задач.
31b6c8a550 2fcfefb464 460bc65d1a 96516727a1 A61a06c432 B1d7cf024c