KRPano – одна из самых распространенных программ для создания виртуальных 3D туров. Приложение получило огромную популярность благодаря неограниченным возможностям по интеграции различных интерактивных дополнений в 3D панорамы. Кроме разработки виртуального тура, в программе есть возможность работы с видео 360 и предметными 3D фото 360.
Особенность программы KRPano в том, что она не имеет привычного интерфейса. Большую часть разработки и настройки 3D тура занимает работа с кодом в управляющем xml файле. На первый взгляд это может показать сложным. Но богатые возможности программы стоят того, чтобы разобраться во всех нюансах.
- Операционные системы: Windows, Mac OS
- Язык интерфейса: Английский
- Цена: 159 Euro
- Скачать: https://krpano.com/download/
Интерфейс и настройка KRPano
Программа KRPano не требует установки. В архиве, скачанном с сайта разработчика, имеются все необходимые файлы.
В первую очередь запускаем «krpano Tools». В этой утилите есть все необходимые инструменты для создания и редактирования стандартного виртуального тура.
Программа KRPano платная, стоимость лицензии составляет 150 евро. Поэтому, перед началом работы необходимо ввести регистрационные данные во вкладке «Settings». Приложение можно использовать в пробном режиме бесплатно. В этом случае в окне просмотра 3D тура будет присутствовать логотип крпано.
Создание 3D панорам в KRPano
Для создания виртуального тура необходимы панорамные изображения в эквидистантной проекции. Они получаются в результате панорамной фотосъемки и склейки фотографий в единую панораму. Панорамная фотография 360 выгляди следующим образом:
Откроем вкладку «Make Vtour» в «krpano tools». Здесь мы создадим сферические панорамы из эквидистантных проекций панорам. Для этого выберем файл конфигурации «Config File» в зависимости от поставленной задачи:
- Vtour-multires.config – дроплет для создания 3D панорам с мультиразрешением. В этом случае панорамы разбиваются на множество небольших изображений для каждого уровня приближения. Когда мы увеличиваем панораму в 3D туре, подгружаются изображения более высокого качества.
- Vtour-normal.config – дроплет, создающий 3D панораму состоящую из шести сторон куба. Такой вариант имеет меньший объем фалов, но скорость загрузки при этом увеличивается, а качество уменьшается.
Остановимся на «Vtour-multires.config». Теперь для создания 3D тура нажмем «Open images» и выберем в папке необходимые изображения. Или же просто перетащим файлы в окно программы. После этого запустится процесс создания сферических панорам. После завершения появятся ссылки к следующим действиям:
- View Tour – открыть виртуальный тур в просмотрщике KRPano.
- Edit Tour — редактировать 3D тур в «VTour Editor».
- Open Output Folder – открыть папку с фалами виртуального тура.
В директории с панорамными фотографиями появится папка «vtour» с виртуальным туром. В этой папке расположены все фалы 3D тура. Среди прочих, здесь находится файл «tour.xml», который содержит основные команды. С ним мы будем работать в дальнейшем.
Чтобы начать просмотр, воспользуемся виртуальным сервером. Он запускается фалом «tour_testingserver.exe» и позволяет открыть 3D тур локально с компьютера. После старта, панорамы откроются в браузере, который установлен по умолчанию.
Редактирование виртуального 3D тура в KRPano
Запустим редактор, он находится на вкладке «Vtour Editor»:
Откроем файл «tour.xml» с помощью соответствующей кнопки. Виртуальный тур откроется в окне предпросмотра:
Здесь мы уже можем переключаться между панорамами двумя способами:
- Крайними стрелками в меню навигации – переход к предыдущей и следующей панораме поочередно.
- Панель быстрого перехода – выборочный переход к панораме. Выбор происходит нажатием на миниатюру, обозначающую конкретную сцену в 3D туре.
В верхней части окна расположены функциональные кнопки:
- «Set as start view» — установка начального расположение панорамы при загрузке. Сохраняется текущий вид.
- «Add hotspot» — добавить хотспот (точку перехода, стрелку).
- «Edit hotspot» — редактировать существующий хотспот.
- «Edit pano-type» — редактирование типа панорамы. Здесь можно: выбрать тип панорамы, отредактировать уровень горизонта, установить ограничение просмотра, задать максимальный и минимальный углы просмотра.
- «Edit tour.xml» — открыть файл «tour.xml» для редактирования в текстовом редакторе.
- «Save tour.xml» — сохранить изменения файла.
- «Open tour folder» — открыть папку 3D тура.
Расстановка точек-перехода
Теперь необходимо расставить точки-перехода в 3D панорамах. Это такие стрелки, при нажатии на которые, происходит переход из одной сцены в другую.
Нажмем «Add hotspot», в окне появится стрелка. Стрелку размещаем в направлении будущего перехода. Затем кликаем по ней и из выпадающего списка выбираем сцену назначения. Таким образом размещаем хотспоты во всех панорамах.
Если необходимо изменить хотспот нажимаем «Edit hotspot» и кликаем по стрелке. После чего можно выбрать другую сцену для перехода, удалить или переместить стрелку.
Когда все точки расставлены, нажимаем «Save tour.xml». Все изменения сохранятся в указанном файле. Теперь 3D тур имеет стрелки-переходы между панорамами:
Редактирование кода в файле tour.xml
Все остальные настройки будем производить в фале tour.xml. Если открыть его в текстовом редакторе (лучше всего использовать Notepad++) увидим следующий код:
<krpano version="1.20.9" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
maps_loadonfirstuse="true"
gyro="true"
gyro_keeplookingdirection="false"
webvr="true"
webvr_keeplookingdirection="true"
webvr_prev_next_hotspots="true"
autotour="false"
littleplanetintro="false"
followmousecontrol="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext=""
layout_width="100%"
layout_maxwidth="814"
controlbar_width="-24"
controlbar_height="40"
controlbar_offset="20"
controlbar_offset_closed="-40"
controlbar_overlap.no-fractionalscaling="10"
controlbar_overlap.fractionalscaling="0"
design_skin_images="vtourskin.png"
design_bgcolor="0x2D3E50"
design_bgalpha="0.8"
design_bgborder="0"
design_bgroundedge="1"
design_bgshadow="0 4 10 0x000000 0.3"
design_thumbborder_bgborder="3 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="0"
design_text_css="color:#FFFFFF; font-family:Arial;"
design_text_shadow="1"
/>
<!--
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
-->
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->
<!-- startup action - load the first scene -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<scene name="scene_01" title="01" onstart="" thumburl="panos/01.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="-47.133" vlookat="2.935" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/01.tiles/preview.jpg" />
<image>
<cube url="panos/01.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,3200" />
</image>
</scene>
<scene name="scene_02" title="02" onstart="" thumburl="panos/02.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="-109.272" vlookat="5.496" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/02.tiles/preview.jpg" />
<image>
<cube url="panos/02.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,3200" />
</image>
</scene>
<scene name="scene_03" title="03" onstart="" thumburl="panos/03.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="-672.017" vlookat="3.742" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/03.tiles/preview.jpg" />
<image>
<cube url="panos/03.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,3200" />
</image>
</scene>
</krpano>
Внесем небольшие изменения в код. Начнем с изменения стиля меню управления. В коде предусмотрено быстрое применения шести дополнительных стилей.
<!-- <include url="skin/vtourskin_design_flat_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_glass.xml" /> -->
<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
<!-- <include url="skin/vtourskin_design_117.xml" /> -->
<!-- <include url="skin/vtourskin_design_117round.xml" /> -->
<!-- <include url="skin/vtourskin_design_black.xml" /> -->Строки стилей закомментированы, они не выполняются скриптом. Чтобы применить стиль, нужно убрать «<!— —>» вначале и конце строки. Используем стиль «vtourskin_design_ultra_light.xml»:
<!-- <include url="skin/vtourskin_design_ultra_light.xml" />Теперь изменим названия каждой панорамы. Для этого в «<scene>» находим атрибут «title=» «» и между кавычек прописываем имя сцены.
Изменим начальный угол обзора. Для этого заменим «fov=»120.000″» в каждой сцене на «fov=»110.000″». Таким образом угол обзора уменьшился до 110 градусов.
Сделаем так, чтобы при старте 3D тура панель с миниатюрами панорам была сразу открыта. В «<skin_settings>» находим «thumbs_opened=»false»» и меняем false на true.
Еще изменим внешний вид хотспота. В паке «skin» хранится файл «vtourskin_hotspot.png», который является изображением стрелки. Просто меняем его на собственную картинку в формате PNG.
После всех изменений 3D тур выглядит так:
Теперь остается разместить виртуальный тур на сайте одним из способов.
Выводы
Мы разобрали лишь малую часть возможностей программы KRPano. В результате мы получили виртуальный 3D тур со стандартным набором элементов. В следующих статьях поговорим о более глубокой настройке всех функций и рассмотрим различные интерактивные дополнения.
