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

Проектирование 3D-моделей для web-приложения — это уже серьезный вызов, а реализация полноценного приложения для проектирования саун на GrassHopper и Three.JS оказалось почти невозможной задачей. Заказчик, ООО "Техноснег", пришел к нам с амбициозной идеей создать интерактивное web-приложение, которое бы позволило B2C-клиентам в деталях спроектировать собственную сауну, начиная от материалов и размеров до выбора оборудования и фурнитуры. Задача Нашей целью было не только создать приложение для создания 3D-моделей саун, но и обеспечить полноценную визуализацию с высокой степенью кастомизации. Основные сложности заключались в том, что:

1. Комплексность визуализации и детализации: Для точной передачи всех деталей сауны и материалов необходимо было работать на GrassHopper и Three.JS, при этом сложность состояла в ограничениях этих технологий. GrassHopper не поддерживает некоторые из ключевых функций для создания полной визуализации помещений. Однако, мы настроили уникальные схемы работы, чтобы преодолеть эти препятствия, и разработали пользовательские функции, необходимые для построения моделей саун.
2. Реализация сложных элементов: Наш проект требовал возможности выбора и визуализации различных материалов — от дерева и керамической плитки до камня и солевых кирпичей. Мы настроили уникальное текстурирование материалов, учитывая нюансы их визуализации, чтобы пользователи могли увидеть реалистичное представление своей будущей сауны. В этом аспекте использовались кастомные шейдеры и настройка освещения для достоверной передачи эффектов текстуры.
3. Полная кастомизация в режиме реального времени: Визуализация и интерактивность — ключевые особенности этого проекта. Пользователи должны были получить возможность выбирать и устанавливать элементы, такие как полки, двери и печи, и видеть это в реальном времени. Для этого мы внедрили интеграцию с видовым кубом и функциями, как масштабирование, вращение и переключение между видами.
4. Мультиязычный и кросс-платформенный интерфейс: Для удобства использования нашим клиентам требовалось обеспечить поддержку русского и английского языков, а также адаптировать приложение для всех видов устройств. Это усложнило разработку, так как добавлялось много дополнительных проверок и настроек.
5. Серверная оптимизация и разработка библиотек: Чтобы приложение обрабатывало запросы пользователя в реальном времени и предоставляло точные результаты, мы разработали мощную серверную инфраструктуру, оптимизированную для быстрой обработки 3D-геометрии. Также были созданы специализированные библиотеки "Материалы", "Оборудование" и "Готовые проекты", которые поддерживают добавление и удаление элементов для будущих обновлений.

Реализация Мы начали с продуманной архитектуры, чтобы задать основу приложения. В течение 8 недель команда разработала ряд уникальных решений, чтобы обойти ограничения программного обеспечения:

• Разработка сложных текстур и освещения: Мы работали с передовыми методами текстурирования и освещения для реалистичного отображения материалов, включая зеркальные и матовые поверхности.
• Уникальная логика отображения: Параметры, которые пользователи вводят, автоматически визуализируются в 3D-модели, позволяя им видеть изменения в режиме реального времени.
• Адаптация под любые устройства: Приложение поддерживает десктопные и мобильные устройства, обеспечивая одинаково удобное и интуитивное взаимодействие на всех платформах.
• Интеграция функции «Cull BackFaces»: Мы применили эту технику для скрытия внешних стен, что позволило пользователям лучше видеть внутреннюю часть модели и оценить все элементы сауны.

Результат В результате получилось высокоинтерактивное приложение, доступное на всех устройствах, позволяющее пользователям без опыта в 3D-моделировании создавать и настраивать сауну под свои предпочтения. Кроме этого, у пользователей есть возможность выгрузить чертежи и спецификации на материалы и оборудование. Пользовательская поддержка и подсказки встроены, что позволяет клиентам с легкостью использовать приложение. Для нас проект стал настоящей проверкой и требовал на каждом этапе работы нестандартного подхода. Тем не менее, с таким проектом мы не просто создали удобное приложение для клиентов, но и выработали новые подходы, которые теперь можем применять для других сложных задач.