Как сделать «открывающиеся» двери и активные хотспоты в виртуальном туре KRPANO?

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

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

Чтобы получить «заплатку» из панорамы, вам понадобится PTGUI. В качестве примера мы используем старенькую панораму с бассейном — голубая вода бассейна должна быть хотспотом. Бассейн достаточно большой, поэтому такой хотспот не получится вписать в одну из граней куба.

Вклейка активного хотспота в виртуальный тур
Необходимо сделать бассейн активным. В нашем примере мы рассмотрим вклейку хотспота большого размера.

1. Подготовка изображения-заплатки

  1. Загрузите сферическую панораму в PTGUI
  2. Включите «Расширенный режим»

    Расширенный реждим PTGUI
    Расширенный режим PTGUI
  3. Выберите вкладку «Source Images»

    Вкладка Source Images
    Вкладка Source Images
  4. Добавьте панорамное изображение и пропустите диалог выбора объектива/камеры

    Пропустите диалог выбора типа объектива
    Пропустите диалог выбора типа объектива
  5. Используйте окно ‘Panorama Editor’, с помощью левой кнопки мыши и ползунков угла обзора выберите нужный вам фрагмент панорамы. Проекция при этом должна быть ректилинейная (Rectilinear)

    Выбор необходимой области панорамы
    Выбор необходимой области панорамы
  6. Вернитесь во вкладку ‘Panorama settings’ и запомните горизонтальный угол обзора.

    Выбор активной области панорамы
    Горизонтальный угол обзора панорамы
  7. Откройте вкладку ‘Image Parameters’  и запишите значения Yaw, Pitch и Roll. Они вам пригодятся далее.Для нашей панорамы эти значения равны:
    hfov = 150
    yaw = -90
    pitch = -4
    roll = -30
  8. Перейдите во вкладку «Create Panorama»
    Нажмите «Set optimum size…» или введите свой размер. Допускается любой размер*, но я советую использовать размер по крайней мере на 30% меньше того, который PTGUI предлагает после нажатия кнопки «Set optimum size…», так как в этом случае при не слишком сильном зуме вставляемый вами фрагмент не будет «рябить».
    Введите название для своего хотспота и нажмите «Create Panorama».

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

     

2. Программная часть, вставка заплатки в krpano

2.1. Система координат в PTGUI и krpano отличается, поэтому Yaw, Pitch и Roll в их обычном виде нам не помогут, и их надо пересчитать. Для этого Клаус написал специальный сценарий, который автоматически преобразует эти значения в подходящую для krpano систему координат.

2.2. Вот этот сценарий — вставьте его в любой участок вашего XML файла, который считаете нужным (например, отлично подойдёт конец файла ‘tour.xml‘, перед закрывающим тегом </krpano>):

2.3. Сценарий  calc_pos_from_hfov_yaw_pitch_roll(hfov, yaw, pitch, rol) теперь можно вызвать при помощи события onloaded из вашего хотспота. Сценарий имеет переменные hfov, yaw, pitch и roll, которые мы записали в пункте 7. Впишите их туда, только не забудьте исправить дробные делители (поставьте точку вместо запятой).

2.4. Итоговый код вашего хотспота должен выглядеть примерно так:

Вот итоговый пример:
http://krpano.com/examples/hotspotextract/

Вот xml:
http://krpano.com/examples/hotspotextract/pool.xml

А вот весь рабочий пример в виде архива:
http://krpano.com/examples/hotspotextract/pool.zip

Как сделать, чтобы хотспот не мигал постоянно, а реагировал на мышку:

Удалите строку: 

animation=»tween(alpha, calc(1.0 — alpha), 3.0, linear, animation());»

И вместо неё впишите onover=»tween(alpha, 1);» onout=»tween(alpha, 0);»

*Важные замечания по работе хотспотов в HTML5 и на мобильных

  • Для хотспотов на html5 ширина или высота изображения не должна превышать определенного размера.
  • Для персональных компьютеров и ноутбуков размер не должен превышать 2000 пикселей, чтобы избежать проблем в Safari
  • На мобильных устройствах и планшетах размер должен быть еще меньше по причинам производительности и ограниченному количеству памяти. Хорошо если размер фрагментов не будет превышать 1200-1400 пикселей по длинной стороне.
  • Вы можете задать изображения уменьшенного размера следующим образом:

 

Статья переведена с английского, вот оригинал.

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

Как сделать «открывающиеся» двери и активные хотспоты в виртуальном туре KRPANO?: 4 комментария

  • 12.04.2017 в 05:10
    Permalink

    Павел, спасибо за статьи!

    Вопрос возник… вставляю строчку там где заменяется анимация на управление мышкой, естественно с заменой, сохраняю… но после ничего не происходит… Подносишь мышку или кликаешь по бассейну, цвет не меняется…
    Я понимаю что вы не занимаетесь провидением и не можете увидеть что я делаю не так… Но всё таки хотелось бы понять как решить этот вопрос….

    Ответ
    • 12.04.2017 в 19:02
      Permalink

      К сожалению, вот так не глядя не подскажу. Если загрузите тур куда-нибудь и дадите ссылку на него, гляну в свободную минуту.

      Ответ
  • 14.03.2016 в 12:30
    Permalink

    Павел спасибо за перевод!
    Статья от Клауса очень полезна для интерактивного наполнения тура.

    Ответ

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

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