Редактор панорам

Редактор панорам — основной инструмент сборки 360°-тура. С 2026-06-05 интерфейс состоит из четырёх опор:

• Шапка редактора — переключатель режима Правка / Просмотр, кнопка публикации и панель «Настройки» с пятью поповерами для проектных параметров.
• Левая панель (280 px) — список сцен, мини-палитра инструментов (Хотспот / Полигон / Медиа) и список слоёв текущей сцены.
• Холст — сама панорама. У каждого элемента поверх изображения (логотип, название, визитка, аудио, мини-карта, список сцен) есть свой «стикер» с иконками «глаз» и «карандаш».
• Плавающие карточки — кратко открываются рядом с выбранным хотспотом или названием сцены, не закрывая остальную часть холста.

В верхнем правом углу шапки находится переключатель режима.

• Правка — все инструменты, стикеры «глаз/карандаш», плавающие карточки и поповеры доступны. Это рабочий режим автора.
• Просмотр — холст превращается в живой плеер тура: видны только те элементы, что отмечены как «видимые» для зрителя. Полная имитация опубликованного тура.

Горячая клавиша V. В режиме Просмотр панель «Настройки» в шапке скрывается — настройки нужны только при правке.

Шапка собрана из двух секций — левой (название проекта и настройки) и правой (режим, публикация, история и помощь).

Левая часть

• Кнопка «Назад» — возврат к списку панорам проекта.
• Название проекта — обрезается по ширине окна (90 / 120 / 180 px на узком, среднем и широком экране).
• Статус сохранения — пилюля «Сохранение…», «Сохранено» или «Ошибка» (ширина фиксирована, поэтому соседние кнопки не дёргаются).
• Панель «Настройки» — пять круглых иконок-поповеров, описаны в следующем разделе. Подпись «Настройки» видна только на широком экране (от 1280 px).

Правая часть

• Правка / Просмотр — переключатель режима (см. выше). Это первый элемент правой секции, поэтому он остаётся на месте даже при изменении ширины окна.
• Публичный / Закрытый — переключатель доступности тура по ссылке. На широком экране показывает подпись, на узком — только иконку (Globe / Lock) с тултипом.
• Открыть / Предпросмотр — кнопка открытия тура в новой вкладке (публичная ссылка для опубликованных, предпросмотр — для закрытых). На узком экране — только иконка ExternalLink.
• 3D-Builder (иконка куба) — передаёт проект в приложение 3dbuilder.vpano.ru для рисования объёмной геометрии поверх плана этажа.
• Отменить / Повторить / Полный экран — стандартная группа управления.
• Видеоуроки, Документация, переключатель темы редактора (светлая / тёмная). На широком экране у «Видеоуроки» виден текст, на узком — только иконка.

Все проектные настройки, действующие на весь тур, собраны в одной пилюле слева в шапке. Каждая кнопка открывает компактный поповер с живым предпросмотром.

Освещение (иконка лампочки)

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

Тема (иконка палитры)

Стиль интерфейса плеера, пять вариантов:

• Тёмный — классический тёмный фон.
• Светлый — белый интерфейс.
• Стекло — полупрозрачные элементы с blur.
• Минимал — максимально незаметная панель.
• Авто — подбирается по системной теме устройства зрителя.

Переходы (иконка Shuffle)

Анимация перехода между сценами и её длительность. Доступны:

• Без перехода — мгновенная смена сцены.
• Растворение — плавный crossfade.
• Приближение — zoomblend в точку перехода.
• Затемнение — fade-to-black.

Ползунок длительности — от 0 до 3000 мс. Настройка глобальна для проекта.

Тур (иконка маршрута)

Открывает правое боковое окно (Sheet) с редактором автоматического тура: список шагов, кнопки Play / Pause / Stop, добавление шагов, перетаскивание порядка, автоматический обход графа навигационных хотспотов и запись видео. Окно не блокирует холст — камеру и поповеры можно использовать параллельно. Подробности — на странице Автоматический тур.

Начальное направление (иконка компаса)

Задаёт стартовый ракурс (yaw, pitch, FOV) для текущей сцены — с какого угла она откроется у зрителя. В поповере доступна кнопка «Захватить вид», которая берёт текущее положение камеры в редакторе. Если параметр выключен, используется направление по умолчанию.

Левая панель занимает 280 px и содержит две сворачиваемые секции (обе видны одновременно).

Секция «Сцены»

• Список всех панорам проекта. Клик по строке — переключение на сцену.
• ★ — стартовая сцена. Кликните по звёздочке, чтобы назначить сцену той, с которой откроется тур.
• Drag-handle на каждой строке. Перетащите сцену из списка прямо на холст — в точке отпускания появится навигационный хотспот, ведущий в эту сцену.
• Контекстное меню строки — переименовать, назначить стартовой, удалить сцену.
• Кнопка «ИИ-названия» (только при включённом ИИ): SSE-стрим автоматических заголовков для всех сцен.

Секция «Слои»

• Палитра «Инструменты» — пилюля 44 × 44 px с тремя кнопками:
  • Хотспот (клавиша H) — режим создания обычных точек на панораме.
  • Полигон (клавиша P) — режим рисования полигональных хотспотов.
  • Медиа (клавиша M) — быстрое размещение изображения, видео или аудио.
• Список слоёв — все хотспоты текущей сцены с иконками типов (навигация / информация / ссылка / полигон / медиа).
• Клик по строке — выбор хотспота на холсте и открытие его плавающей карточки.
• Иконка карандаша — раскрыть карточку, иконка корзины — удалить.

У каждого элемента поверх панорамы есть свой стикер размером 26 × 26 px в углу. Он появляется только в режиме Правка и содержит два действия:

• «Глаз» — переключает видимость элемента в опубликованном туре. Один клик — и элемент скрыт у зрителя, в редакторе он остаётся виден приглушённым.
• «Карандаш» — открывает поповер с настройками этого элемента.

Стикеры есть у следующих элементов:

• Логотип (верхний левый угол). Карандаш открывает загрузку логотипа и ползунок ширины (20–200 px). «Глаз» скрывает логотип у зрителя. По умолчанию логотип выключен — это специально, чтобы пустые проекты не показывали placeholder.
• Название сцены (пилюля сверху по центру). Карандаш — редактор названия и описания текущей панорамы.
• Визитка (кнопка «i» в верхнем правом углу). Карандаш — вкладочный редактор визитки (Профиль / Контакты / Соцсети), импорт визитки из другого проекта, на мобильных — bottom-sheet.
• Аудио (пилюля внизу по центру). Карандаш — загрузка фонового звука, флаг «использовать как глобальный для всех сцен», предпрослушивание.
• Мини-карта (правый нижний угол). Карандаш открывает редактор расположения маркеров и плана этажа (см. ниже).
• VR-кнопка (в панели управления внизу справа) — новинка 2026-06-05. В редакторе это стикер-маркер: «глаз» включает / выключает её видимость для зрителя. Сама VR-сессия запускается только в опубликованном плеере.
• Список сцен (полоса миниатюр или всплывающая кнопка снизу). «Глаз» скрывает / показывает список у зрителя.

Холст показывает текущую панораму. Вращение — левой кнопкой мыши или пальцем, масштаб — колесом мыши или щипком.

QuickCreate — быстрое создание хотспота

Включите инструмент Хотспот (H) и кликните в нужной точке (либо просто сделайте двойной клик по панораме в режиме Правка). В точке клика откроется компактный QuickCreate-попап — трёхшаговый мастер с живым предпросмотром:

1. Тип — навигация, информация, ссылка, полигон или медиа.
2. Цель — для навигации сцена назначения, для информации заголовок и контент, для ссылки URL и т. д.
3. Поля и предпросмотр — иконка, подпись, дополнительные параметры; результат сразу виден на панораме.

В шаге информации доступна кнопка «Сгенерировать ИИ»(только при включённом ИИ): подберёт корректный заголовок и описание по контексту. Ссылка «Дополнительные настройки…» внизу попапа открывает полный диалог с библиотекой иконок и тонкими параметрами (глубина, поворот, кастомная иконка).

Плавающие карточки

После создания или выбора хотспота рядом с ним появляется плавающая карточкас его свойствами. Карточка следует за хотспотом и закрывается кликом по холсту илиEsc.

Манипуляторы выбранного хотспота

• Пунктирное кольцо вокруг иконки — индикатор того, что хотспот выбран.
• Move-иконка (четыре стрелки) — перетаскивание хотспота по панораме.
• Rotation-хэндл (кружок на краю иконки) — поворот значка вокруг оси.

Drag-handle сцены = навигация в один жест

Drag-handle строки сцены в левой панели можно перетащить прямо на холст: в точке отпускания появится навигационный хотспот, ведущий в эту сцену. Полный диалог настройки не открывается — параметры можно поправить в плавающей карточке.

Вертикальный стек кнопок в правом нижнем углу холста повторяет панель управления из опубликованного плеера. У каждой кнопки есть стикер «глаз» — скрыть / показать её зрителю.

• Zoom + / Zoom − — приближение и отдаление сцены.
• Авто-вращение — медленный поворот камеры в плеере.
• Гироскоп — поворот сцены по наклону мобильного устройства.
• VR (новинка 2026-06-05) — кнопка запуска WebXR-сессии в опубликованном туре. В редакторе она — визуальный маркер: «глаз» переключает видимость, но клик VR-сессию не открывает (для этого нужен публичный плеер).
• Полный экран — клавиша F.
• Мини-карта — открывает / закрывает оверлей мини-карты. У этой кнопки кроме «глаза» есть и «карандаш» — он открывает редактор маркеров и плана этажа.

Мини-карта — интерактивная 2D-схема расположения панорам. Открывается кнопкой мини-карты в панели управления (правый нижний угол). При открытии из карандаша-стикера сразу включается режим редактирования маркеров.

Режим маркеров (по умолчанию)

• Перетаскивайте кружки панорам по карте, чтобы расставить их в реальной планировке.
• Двойной клик по маркеру — переключение на эту сцену.
• У выбранного маркера отображается конус FOV с поворотным хэндлом: вращайте хэндл — это калибрует «север» панорамы и автоматически выравнивает направления навигационных хотспотов.
• Двойной клик по хэндлу — сбросить поворот в ноль.
• Иконка «Сброс всех маркеров» — обнуляет координаты у всех сцен (с подтверждением). Поворот mapRotation при этом сохраняется.

Режим плана этажа

Доступен, если в проект загружен план этажа (PNG / SVG / WebP):

• Перетаскивание мышью — сдвиг плана под маркерами.
• Колесо мыши — масштабирование плана.
• Ползунок в шапке мини-карты — поворот плана.

Загрузка плана — иконка Upload или Drag-Drop. Удаление — иконка ×с подтверждением.

Визитная карточка — всплывающий блок с контактами компании или агента. Открывается в плеере по кнопке «i» в правом верхнем углу. Редактируется через карандаш-стикер на этой кнопке.

Поповер с тремя вкладками

• Профиль — название, логотип карточки, ширина логотипа, дополнительный HTML-блок.
• Контакты — телефон (tel:), e-mail (mailto:), сайт, адрес.
• Соцсети — ссылки на VK, Telegram, WhatsApp и другие сети.

Под вкладками — флаги «Включить визитку» и «Показывать сразу при загрузке тура». На мобильных вместо поповера открывается bottom-sheet.

Импорт визитки

Кнопка «Импорт» позволяет перенести визитку из другого проекта одним кликом — удобно при работе под одним брендом во многих турах.

Кнопка «Подключить телефон» доступна для всех пользователей у каждого проекта (раньше — только для администраторов). При нажатии открывается модальное окно с QR-кодом.

1. Откройте на телефоне камеру или просканируйте QR — браузер перейдёт на m.vpano.ru.
2. Мобильное приложение сразу подключится к проекту по разовому токену сопряжения.
3. Снимайте 360° панорамы прямо с телефона — они появятся в проекте без ручной загрузки.

ИИ-возможности подключаются на стороне аккаунта (флаг aiEnabled). Когда они включены, в редакторе появляются две точки входа:

• ИИ-названия сцен — кнопка со «звёздочкой» в шапке секцииСцены: SSE-стрим автоматических заголовков для всех сцен по их содержимому.
• ИИ-описание в QuickCreate — кнопка со «звёздочкой» на шагеИнформация в попапе создания хотспота: ИИ сгенерирует короткий заголовок и текст по контексту.

Шапка редактора рассчитана на десктоп и ноутбук. Минимально удобный размер — от 1024 px по ширине. От 1280 px (xl-брейкпоинт) появляются текстовые подписи у кнопок:

• «Настройки» — подпись над панелью поповеров.
• «Публичный / Закрытый» — текст рядом с иконкой замка / глобуса.
• «Открыть / Предпросмотр» — текст у иконки ExternalLink.
• «Видеоуроки» — текст рядом с иконкой шапки выпускника.

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

Дополнительно: смотрите Автоматический тур для подробностей по сборке тур-сценариев и Импорт панорам — для подготовки сцен.