Разработка сайта архитектурного бюро на 1С-Битрикс

Разработка сайта архитектурного бюро на 1С-Битрикс

Архитектурное бюро продаёт экспертизу, и сайт должен эту экспертизу транслировать. Потенциальный заказчик — девелопер, частный инвестор или муниципалитет — оценивает портфолио реализованных проектов, компетенции команды и масштаб работ. Шаблонный сайт с тремя слайдами и формой обратной связи здесь не работает. Нужна структурированная база проектов с фильтрацией, интерактивные 3D-туры и визуально чистая подача, где архитектура говорит сама за себя. На 1С-Битрикс это собирается через инфоблоки с развитой типизацией, интеграции с платформами 3D-визуализации и продуманный фронтенд.

Услуги бюро

Инфоблок «Услуги» с элементами:

• Архитектурное проектирование (жилые, коммерческие, общественные здания)
• Дизайн интерьера
• Авторский надзор
• Градостроительное проектирование
• Реконструкция и реставрация
• Консалтинг и экспертиза

Свойства: описание, перечень этапов работы (текстовое поле), примеры проектов (привязка к инфоблоку портфолио), иконка для карточки. На фронте — плитка услуг с переходом на детальную страницу, где описан процесс работы и показаны релевантные проекты.

Команда архитекторов

Раздел «Команда» — не формальность. В архитектурном бюро заказчик часто выбирает конкретного архитектора, увидев его проекты. Инфоблок «Команда»:

• Фото — профессиональный портрет
• Должность — главный архитектор, ведущий архитектор, архитектор-дизайнер
• Специализация — жилые комплексы, общественные пространства, интерьеры
• Привязка к проектам — связь с инфоблоком портфолио
• Образование и награды — текстовое поле
• Публикации — привязка к инфоблоку прессы

На детальной странице архитектора — его портфолио (проекты с фильтром «только этот автор»), биография и публикации. По сути — персональная посадочная страница внутри сайта бюро.

Публикации в прессе и награды

Два отдельных инфоблока:

«Пресса» — публикации в профильных изданиях (Архитектурный вестник, AD, ПРОЕКТ International). Свойства: издание, дата, ссылка на оригинал, скан/PDF, привязка к проекту. На фронте — лента с логотипами изданий, работает как социальное доказательство.

«Награды» — конкурсы и премии (Золотой Трезини, Зодчество, WAF). Свойства: название конкурса, год, номинация, результат (победитель / финалист / шорт-лист), привязка к проекту. Выводятся на главной — блок «Признание» с логотипами конкурсов и годами.

Структура портфолио проектов

Портфолио — основной инструмент продажи. Инфоблок «Проекты» с развитой системой свойств:

• Тип объекта — список: жилой комплекс, частный дом, офисное здание, торговый центр, общественное пространство, культурный объект
• Статус — список: концепция, проектирование, строительство, реализован
• Площадь — числовое (м²)
• Год завершения — числовое
• Локация — строковое (город, страна)
• Архитектор — привязка к инфоблоку «Команда»
• Услуги — привязка к инфоблоку «Услуги» (что именно делало бюро)
• Фотогалерея — множественное файловое свойство
• 3D-тур — строковое (URL iframe для Matterport) или HTML-свойство
• Видео — ссылка на YouTube/Vimeo
• Описание проекта — детальное текстовое поле с разбивкой на блоки (задача, решение, материалы, конструктив)
• Награды — привязка к инфоблоку наград

Фильтрация на фронте: по типу объекта, статусу, году, архитектору. Реализуется через smart-фильтр модуля каталога или кастомный AJAX-фильтр с фасетной индексацией. Для портфолио из 50–200 проектов фасетный индекс избыточен, но работает стабильно и не требует кастомного кода.

Карточка проекта в каталоге: обложка на весь блок, название, тип, год, площадь. При наведении — затемнение и краткое описание. Минималистично — архитектурные бюро ценят воздух в дизайне.

Детальная страница проекта — длинная страница с секциями:

1. Hero-блок с главной фотографией на весь экран
2. Описание проекта (задача заказчика, решение, особенности)
3. Фотогалерея — masonry или горизонтальный скролл
4. 3D-тур (если есть) — iframe с Matterport или Pannellum.js
5. Технические характеристики (площадь, этажность, материалы) — таблица
6. Команда проекта — миниатюры архитекторов с привязкой
7. Награды — если проект отмечен

3D-визуализации и интерактивные туры

3D-визуализации и виртуальные туры — то, что превращает сайт бюро из каталога фотографий в интерактивный инструмент презентации. Два подхода с принципиально разной архитектурой.

Matterport и внешние платформы. Matterport, Kuula, 3DVista — облачные сервисы, в которых создаются 3D-туры на базе панорамных снимков или лидарного сканирования. Интеграция с сайтом — через <iframe>. Технически это просто: свойство элемента инфоблока хранит URL, шаблон компонента рендерит iframe с нужными размерами. Преимущества: качество визуализации, готовый плеер с навигацией, мобильная поддержка. Ограничения: зависимость от стороннего сервиса, платная подписка, нет контроля над внешним видом плеера.

Настройки iframe для Matterport:

• allow="fullscreen; vr" — поддержка полноэкранного режима и VR-устройств
• loading="lazy" — отложенная загрузка тура (он тяжёлый, не нужно грузить при открытии страницы)
• Параметры URL: &play=1 (автозапуск), &qs=1 (быстрый старт), &brand=0 (скрыть логотип Matterport — платная опция)

Pannellum.js — self-hosted решение. Open-source библиотека для панорамных туров. Фотограф снимает сферические панорамы (equirectangular), загружает на сервер, Pannellum рендерит их в интерактивный тур с переходами между точками.

Преимущества: полный контроль, никаких подписок, кастомизация интерфейса. Ограничения: нет автоматического 3D-моделирования (только панорамы), нужно самостоятельно настраивать hotspot-ы (точки перехода).

Реализация Pannellum на Битрикс:

Инфоблок «3D-туры» с элементами-турами. Каждый тур — элемент с привязкой к проекту. Свойства:

• Панорамы — множественное файловое свойство (equirectangular JPEG)
• Конфигурация — текстовое свойство с JSON-описанием тура (сцены, hotspot-ы, начальная точка)

JSON-конфигурация генерируется кастомной административной страницей: менеджер загружает панорамы, расставляет точки перехода через визуальный редактор (координаты pitch/yaw), сохраняет результат. На фронте Pannellum.js инициализируется с этой конфигурацией.

Оптимизация панорам. Equirectangular-изображение для качественного тура весит 15–30 МБ. Решения:

• Мультиразрешение (multires) — Pannellum поддерживает тайловые пирамиды. Утилита generate.py (из комплекта Pannellum) нарезает панораму на тайлы разных уровней детализации. Браузер загружает только видимую часть в нужном разрешении — как Google Maps.
• Предзагрузка следующей сцены — при приближении курсора к hotspot начинается фоновая загрузка следующей панорамы.
• Progressive JPEG — панорамы сохраняются в progressive-формате, отображение начинается до полной загрузки.

BIM-модели. Отображение BIM-моделей (IFC, Revit) в браузере — задача отдельного уровня сложности. Полноценные BIM-вьюеры (Autodesk Viewer, xeokit) тяжелы и требуют конвертации моделей. Для сайта-портфолио достаточно экспортировать ключевые виды из BIM в формат glTF/GLB и отображать через <model-viewer> от Google или Three.js. Это даёт интерактивное вращение 3D-модели без полного BIM-функционала. Конвертация IFC → glTF выполняется на этапе подготовки контента, не автоматически.

Техническая архитектура фронтенда

Сайт архитектурного бюро визуально минималистичен, но технически насыщен: тяжёлые изображения, iframe с 3D-турами, возможные WebGL-элементы. Ключевые решения:

• Отложенная загрузка всех тяжёлых элементов — iframe, видео, галереи ниже fold загружаются через Intersection Observer
• Skeleton-экраны — вместо спиннеров при загрузке галереи и тура
• Адаптация для мобильных — на телефонах 3D-тур заменяется на статичную панораму с возможностью запустить тур по нажатию (экономия трафика и батареи)
• Типографика — один шрифт, два начертания, локальное подключение

Этапы разработки

Итого: 10–12 недель. Если 3D-туры делаются на Matterport — минус 1.5 недели на фронтенде и контенте. Если нужен Pannellum с кастомным админ-интерфейсом — плюс неделя.