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

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

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

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

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

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

   

3. Выберите вкладку «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

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

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

*Важные замечания по работе хотспотов в 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″]