Классические 360° панорамы

Эта инструкция описывает полный процесс создания 360° виртуального тура в VPano: от загрузки панорамных изображений до публикации интерактивного тура с переходами, медиа-контентом, фоновым звуком и VR-поддержкой.

1. Откройте проект на панели управления.
2. Нажмите Новая панорама.
3. Загрузите 360° изображение (equirectangular, соотношение сторон 2:1).
4. После создания откроется редактор панорамы.

Для загрузки нескольких сцен используйте Мультизагрузка. Приложение загружает файлы и создаёт отдельную панораму для каждого изображения.

• Название берётся из имени файла (можно изменить позже).
• Рекомендуется заранее называть файлы: kitchen.jpg, hall.jpg и т.д.

Редактор панорамы состоит из трёх зон:

• Тулбар (слева): переключение режимов «Правка/Предпросмотр», добавление хотспотов (NAVIGATION, INFO, TAPE), инструмент полигон, FOV-слайдер.
• 3D-просмотр (центр): интерактивная панорама. Вращайте камеру мышью, перетаскивайте хотспоты, рисуйте полигоны, настраивайте размер и позицию медиа.
• Панель свойств (справа): параметры выбранного элемента — панорамы или хотспота. Автосохранение через 1.5 секунды после изменения.

Внизу редактора расположена мини-карта с планом этажа и позициями панорам.

Студия поставляется с шестью готовыми цветовыми темами — от светлой дневной до глубокой тёмной. Все темы проверены на читаемость по стандарту WCAG‑AA: текст и значки одинаково хорошо видны на любой схеме.

• Переключение в один клик — в настройках студии.
• Выбранная тема запоминается для вашего аккаунта и применяется во всех проектах.
• Тема влияет только на интерфейс редактора, не на готовый публичный тур.

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

Чтобы зафиксировать стартовое направление для конкретной панорамы:

1. В свойствах панорамы включите «Начальное направление (ручное)».
2. Поверните камеру на нужный ракурс в 3D-просмотре.
3. Нажмите кнопку «Сохранить направление».

В VPano есть 4 типа хотспотов:

Добавление: в режиме редактирования кликните по сцене → выберите тип в диалоге создания.

• Выберите целевую панораму — куда ведёт переход.
• Настройте иконку: одна из 40+ встроенных или загрузите свою.
• Параметры: масштаб, поворот (Ctrl+перетаскивание), глубина.
• Ориентация — Авто / Вручную: в авто‑режиме значок сам поворачивается в сторону цели на основе мини‑карты, в ручном — вы задаёте угол сами.
• В готовом туре навигационные точки выглядят как плоские диски на полу.
• При перемещении точки на мини‑карте все связанные навигационные значки автоматически перенаправляются.

• Заголовок и текст отображаются в модальном окне при клике.
• Медиа: можно добавить изображение, видео (mp4/webm, макс. 10 МБ) и аудио (mp3/ogg/wav).
• Медиа отображается в модальном окне в просмотре (фото, видеоплеер, аудиоплеер).
• При наведении в просмотре показывается всплывающая подсказка с заголовком.

• Укажите URL — при клике откроется ссылка.
• Можно выбрать: открывать в новой вкладке или текущей.
• Подпись отображается как всплывающая подсказка при наведении.

Полигон — это произвольная область на панораме, определённая вершинами.

1. Выберите инструмент «Полигон» в тулбаре.
2. Кликните минимум 3 точки на панораме (для медиа рекомендуется 4 — прямоугольник).
3. Завершите создание.

Параметры полигона:

• Действие: Нет / Навигация / Информация / Ссылка.
• Оформление: цвет заливки, цвет и толщина обводки, прозрачность.
• Медиа: изображение или видео вместо цвета заливки (см. ниже).
• Вершины: жёлтые маркеры можно перетаскивать для точной подгонки формы.

Полигон можно использовать как «экран» или «картину» на стене панорамы. Загруженное медиа заполняет область полигона с учётом перспективы и кривизны.

1. Создайте полигон из 4 точек (прямоугольник на стене).
2. В свойствах → раздел Медиа.
3. Загрузите изображение или видео (mp4/webm, макс. 10 МБ).
4. Медиа сразу отображается в редакторе — настройте форму, перетаскивая вершины.

• Перемещение: зажмите хотспот и перетащите мышью.
• Поворот иконки: удерживайте Ctrl и тяните влево/вправо.
• Вершины полигона: выберите полигон → перетаскивайте жёлтые маркеры вершин.
• При наведении значок плавно «оживает» (анимация подсветки).
• Все изменения сохраняются автоматически.

В редактор встроена библиотека из более 40 значков: стрелки, точки, метки, символы интерьера, кружки и геометрические фигуры.

• Выбор иконки — в правой панели свойств выбранного хотспота.
• Можно загрузить и свою картинку (PNG/SVG) — она встанет в библиотеку проекта.
• В настройках мини‑карты можно одной кнопкой назначить иконку всем навигационным хотспотам сразу.

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

Три режима редактирования

Автоматизация

• Связать все: автоматически соединяет все панорамы, расположенные рядом друг с другом. За один клик создаётся навигация для всего проекта!
• Настройки хотспотов: массовое изменение pitch, масштаба и иконки для всех навигационных хотспотов во всех панорамах.

Каждой панораме можно назначить фоновое аудио:

1. В свойствах панорамы (правая панель) → Фоновый звук.
2. Загрузите аудиофайл (mp3/ogg/wav, макс. 10 МБ).
3. Аудио автоматически воспроизводится в просмотре (loop, с задержкой до первого клика).

На панели инструментов есть зелёная кнопка «Превью». Она открывает готовый тур в новой вкладке — как его увидит посетитель.

• Превью использует все ваши последние изменения (без необходимости публиковать).
• Подходит для быстрой проверки перед отправкой клиенту.
• Закрытие вкладки не влияет на проект — изменения сохранены автоматически.

Из набора панорам можно собрать «кино‑тур»: маршрут по точкам с автоматическими плавными переходами, паузами и поворотами камеры.

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

Кнопка ⚙ на странице проекта открывает модальное окно с вкладками:

• Основное: название, слаг, описание, экспорт (ZIP), ограничения качества.
• Viewer UI: показать/скрыть список сцен, загрузить логотип.
• Доступ: управление коллабораторами (если доступно).
• Опасная зона: удаление проекта.

Публичный доступ настраивается прямо на странице проекта через выпадающий список (Публичный / Закрытый).

1. На странице проекта выберите Публичный в выпадающем списке доступа.
2. Нажмите Опубликовать — запускается экспорт, затем открывается публичный просмотр.
3. ZIP‑экспорт: в настройках (⚙) → архив для размещения на вашем хостинге.

Публичный viewer включает:

• Мини-карта — план этажа с точками панорам и FOV-конусом.
• Тулбар: Zoom In/Out, авто-вращение, поделиться, полноэкран, VR.
• Список сцен: миниатюры панорам с горизонтальным скроллом.
• Авто-скрытие: весь UI исчезает через 4 секунды бездействия.
• Аудио-плеер: Play/Pause, громкость — при наличии фонового звука.

Кнопка «Поделиться» в тулбаре открывает окно с:

• Ссылка — URL с параметрами текущей панорамы и направления взгляда.
• QR-код — с логотипом vpano.ru. Скачивается как PNG 512×512.
• Соц. сети: Telegram, ВКонтакте, WhatsApp — кнопки для быстрой отправки.

VPano поддерживает WebXR для VR-гарнитур (Quest 2, Pico и др.):

• С контроллерами: тонкий луч от контроллера, наведите на хотспот и нажмите триггер.
• Без контроллеров (гейз): белый круг-прицел в центре. Смотрите на хотспот 2 секунды → переход.
• Поддерживаются все типы хотспотов, включая полигоны.

В личном кабинете VPano есть кнопка чата — пишите вопрос напрямую команде разработки.

• История переписки сохраняется между визитами.
• Видно, на связи ли команда прямо сейчас (индикатор статуса).
• Подходит для технических вопросов, идей и обратной связи.

• Формат: equirectangular 2:1 (6000×3000 для десктопа, 4096×2048 для мобильных).
• Качество: ограничивайте разрешение в настройках (2k/4k) для быстрого экспорта.
• Стартовая сцена: первая в списке. Поменяйте порядок стрелками или кнопкой.
• Видео на стенах: используйте MP4 (H.264) для лучшей совместимости. Макс. 10 МБ.
• Полигоны с медиа: 4 вершины (прямоугольник) дают лучшее качество текстуры.
• Логотип: если не загружен — область логотипа в просмотре полностью скрыта.