Посетитель нажимает на то, что видит
Привычный способ — навесить поверх панорамы кружок-хотспот: человек кликает по значку, а не по объекту. Здесь иначе: зоны-полигоны обводят реальные объекты в кадре. Подсвечен колёсный диск автомобиля, клик по нему открывает карточку услуги «Защита автомобильных дисков».
Содержимое карточек авторится в Markdown и открывается в модальном окне: текст услуги правится как обычный документ.
Плеер с открытой лицензией, доработанный под задачу
В основе — стороннее решение с открытой лицензией (MIT), которое мы доработали под задачу. Просмотрщик панорам как таковой уже написан, и переписывать его ради этого проекта незачем.
Доработка ушла в механику тура: зоны-полигоны на объектах, карточки из Markdown, переходы между точками — стрелки, нарисованные геометрией прямо в сцене.
Тяжёлые кадры и план этажа
24 сферические панорамы — это много тяжёлых изображений. Панорамы тайловые, а декодирование вынесено в воркер, вне основного потока страницы: большие кадры не вешают страницу.
План этажа держит геометрию тура: у каждой точки есть координаты на плане, направление взгляда, высота от пола и связи с соседними точками. Из этих данных строятся переходы и стартовая ориентация в каждой точке.
Ссылка на конкретную точку и ракурс
Адрес вида ?id=0&lat=-2.19&lon=-28.02&fov=75 открывает не тур вообще, а конкретную точку и конкретный ракурс: менеджер может дать ссылку сразу на нужное место.
Рядом — остальная обвязка: локализация, гироскоп на мобильных, полноэкранный режим, клавиатурные сокращения и своё контекстное меню с пунктом «скопировать код для вставки».
Как тур живёт на сайте студии
Тур работает на домене клиента, а на сайте студии показан карточкой: превью открывает лайтбокс, где тур крутится прямо на странице, без ухода на другой сайт.
iframe монтируется только после клика по превью. Плеер весит под мегабайт, и грузить его каждому посетителю страницы незачем: до клика на месте карточки лежит превью, после клика — рабочий тур.
Путь от плана этажа до карточки услуги