Как сделать «открывающиеся» двери и активные хотспоты в виртуальном туре 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>):

<action name="calc_pos_from_hfov_yaw_pitch_roll">
  div(hfov,%1,57.295779);
  div(yaw,%2,-57.295779);
  div(pitch,%3,57.295779);
  div(roll,%4,-57.295779);
  mul(hfov,0.5);Math.tan(hfov);mul(width,hfov,1000);set(height,'prop');
  Math.cos(ch,yaw);Math.sin(sh,yaw);
  Math.cos(ca,pitch);Math.sin(sa,pitch);
  Math.cos(cb,roll);Math.sin(sb,roll);
  mul(m0,ca,ch);
  mul(tmp,cb,sa);mul(tmp,ch);mul(tmp2,sb,sh);add(m3,tmp,tmp2);
  mul(m4,cb,ca);
  mul(tmp,cb,sa);mul(tmp,sh);mul(tmp2,sb,ch);sub(m5n,tmp,tmp2);mul(m5n,-1);
  mul(tmp,sb,sa);mul(tmp,ch);mul(tmp2,cb,sh);sub(m6n,tmp,tmp2);mul(m6n,-1);
  Math.atan2(yaw,m6n,m0);
  Math.atan2(roll,m5n,m4);
  Math.asin(pitch,m3);
  mul(ath,yaw,57.295779);
  mul(atv,pitch,57.295779);
  mul(rotate,roll,57.295779);
</action>

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

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

<hotspot name="spotNNN"
         url="pool_extract.jpg" 
         distorted="true"
         onloaded="calc_pos_from_hfov_yaw_pitch_roll(150, -90, -4, -30);"
         ...
         />

Вот итоговый пример:
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 пикселей по длинной стороне.
  • Вы можете задать изображения уменьшенного размера следующим образом:
<!-- lower resolution images for HTML5 and mobile devices -->
<hotspot name="water" url="pool_extract_html5desktop.jpg" devices="html5+desktop" />
<hotspot name="water" url="pool_extract_html5mobile.jpg"  devices="mobile|tablet" />

 

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

[widget id=»nav_menu-2″]

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

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

  • 05.02.2019 в 11:32
    Permalink

    Добрый день! Как добавить несколько сменяющих друг друга цветов?

    Ответ
  • 24.03.2018 в 21:08
    Permalink

    Вы забыли добавить из оригинальной стать: «Hugin:
    1.1. Select ‘Load images…’, load the pano image and select »Equirectangular’ as lens type and 360 as HFOV. Note — for a partial pano enter the smaller hfov and for a flat pano enter 1.0 as hfov.» У меня не получалось, пока не обратился к оригиналу.

    Ответ
  • 12.04.2017 в 05:10
    Permalink

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

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

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

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

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

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

    Ответ

Добавить комментарий для Павел Богданов Отменить ответ

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.