Как сделать виртуальный тур с планом этажа

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

Руководствуясь прошлыми уроками, вы уже можете собрать собственный виртуальный тур в krpano, можете расставить хотспоты, настроить внешний вид и даже сделать активные области. Однако, немаловажная часть любого виртуального тура — карта, и в этой статье вы узнаете, как добавить карту в ваш виртуальный тур.

1. Прежде всего, вам нужен тур, сделанный при помощи стандартного дроплета MAKE VTOUR MULTIRES DROPLET в krpano. Если у вас нет такого тура, можете скачать тестовый образец у меня.

2. Прежде всего, вам понадобится план-схема этажа. Можете использовать из моего примера:

План-схема этажа для виртуального тура
План-схема этажа для виртуального тура
  1. Скопируйте это изображение в папку с виртуальным туром и переименуйте её в map.png.
  2. Также вам понадобятся вешки, скачайте этот файл и сохраните в папку с туром: Вешка для карты виртуального тура
  3. Кнопка закрытия панорамы украсит ваш виртуальный тур, тоже скачайте: Кнопка закрытия панорамы
  4. Кнопка открытия панорамы тоже пригодится, вот она: Кнопка открытия и закрытия карты

3. В папку с туром добавьте файл под названием map.xml. Можете получить его, скопировав файл tour.xml, переименовать и очистить. В документе должны остаться только следующие строки:

4. Откройте файл tour.xml и добавьте в него строки <include url="map.xml" /> , теперь верхняя часть вашего файла tour.xml должна выглядеть так:

5.  Дальнейшие изменения будем производить в файле map.xml. Откройте файл в редакторе, добавьте в него следующие строки:

6. Откройте файл map.xml в фотошопе, выберите инструмент раскройка (slice tool) slice-tool

7. C его помощью нарисуйте прямоугольник из левого верхнего угла до той точки, где собираетесь поставить точку.

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

8. Дважды щелкните по прямоугольнику и обратите внимание на 2 значения. .

Координаты точки на плане этажа
Координаты точки на плане этажа

9. Впишите эти значения в первый хотспот. Ширина это X, высота это Y. Пример:

10. Дайте точке название, вписав его в скобки:  onhover="showtext(Первая панорама);"

11. Впишите в loadscene название сцены, которую нужно открывать при щелчке на эту точку. например:  loadscene(scene_01, null, MERGE, BLEND(1));

12. Аналогичным образом сделайте все вешки. При необходимости скопируйте строки с ними (только дайте хотспотам уникальные имена)! Например:  spot1 spot2 spot3 spot4

Ну и всё, карта должна работать. Кнопки и хотспоты редактируйте по своему вкусу. В следующем уроке постараюсь рассказать, как сделать хотспот активным (перекрасить) и как добавить к вешкам радар.

А вот рабочий виртуальный тур с картами в моём исполнении: Виртуальный тур с планом этажа.

Вопросы задавать только в комментариях!

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров

Как сделать виртуальный тур с планом этажа: 4 комментария

  • 04.05.2017 в 08:57
    Permalink

    Павел, 6 пункт «Откройте файл map.xml в фотошопе» — шутка?
    map.png

    Ответ
  • 14.11.2016 в 11:04
    Permalink

    Павел, спасибо, полезная статья!
    Подскажите, как встроить план здания с радаром в тур вроде бы понятно. Подскажите, для каждого заказчика вы сами рисуете каждый раз план его здания или может быть заказчик может предоставить что-нибудь готовое, либо может есть где-то сборник заготовок, которые можно редактировать, дорисовывать под каждое конкретное здание?
    В общем вопрос, как это сделать легче всего?

    Ответ
    • 14.11.2016 в 15:58
      Permalink

      Здравствуйте, Александр. По-разному бывает, иногда у заказчика уже есть красивый, отрисованный в 3д план, иногда заказчик экономит, и тогда я отрисовываю план с плана эвакуации заказчика, или по нарисованной от руки схеме.
      Но иногда делаю планы при помощи программ для 3d проектирования жилища, просто создавая похожее здание. Получается симпатично, картинка объёмная. Только название своей программы сейчас не помню, помню только что она бесплатная, и я её спокойно скачал в интернете.

      Ответ

Добавить комментарий

Ваш e-mail не будет опубликован.