Создание виртуального 3D тура в KRPano: первые шаги, с чего начать

KRPano – одна из самых распространенных программ для создания виртуальных 3D туров. Приложение получило огромную популярность благодаря неограниченным возможностям по интеграции различных интерактивных дополнений в 3D панорамы. Кроме разработки виртуального тура, в программе есть возможность работы с видео 360 и предметными 3D фото 360.

Особенность программы KRPano в том, что она не имеет привычного интерфейса. Большую часть разработки и настройки 3D тура занимает работа с кодом в управляющем xml файле. На первый взгляд это может показать сложным. Но богатые возможности программы стоят того, чтобы разобраться во всех нюансах.

Создание виртуальных 3D туров под ключ

Размещение 3D панорам в Яндекс, Google и другие платформы в Интернете.
KRPano
  • Операционные системы: Windows, Mac OS
  • Язык интерфейса: Английский
  • Цена: 159 Euro
  • Скачать: https://krpano.com/download/

Интерфейс и настройка KRPano

Программа KRPano не требует установки. В архиве, скачанном с сайта разработчика, имеются все необходимые файлы.

Файлы программы KRPano
Файлы программы KRPano

В первую очередь запускаем «krpano Tools». В этой утилите есть все необходимые инструменты для создания и редактирования стандартного виртуального тура.

Интерфейс программы krpano Tools
Интерфейс программы krpano Tools

Программа KRPano платная, стоимость лицензии составляет 150 евро. Поэтому, перед началом работы необходимо ввести регистрационные данные во вкладке «Settings». Приложение можно использовать в пробном режиме бесплатно. В этом случае в окне просмотра 3D тура будет присутствовать логотип крпано.

Создание 3D панорам в KRPano

Для создания виртуального тура необходимы панорамные изображения в эквидистантной проекции. Они получаются в результате панорамной фотосъемки и склейки фотографий в единую панораму. Панорамная фотография 360 выгляди следующим образом:

Эквидистантная проекция панорамы 360
Эквидистантная проекция панорамы 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»:

Krpano Vtour Editor
Krpano Vtour Editor

Откроем файл «tour.xml» с помощью соответствующей кнопки. Виртуальный тур откроется в окне предпросмотра:

Krpano Vtour Editor
Krpano Vtour Editor

Здесь мы уже можем переключаться между панорамами двумя способами:

  1. Крайними стрелками в меню навигации – переход к предыдущей и следующей панораме поочередно.
  2. Панель быстрого перехода – выборочный переход к панораме. Выбор происходит нажатием на миниатюру, обозначающую конкретную сцену в 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», в окне появится стрелка. Стрелку размещаем в направлении будущего перехода. Затем кликаем по ней и из выпадающего списка выбираем сцену назначения. Таким образом размещаем хотспоты во всех панорамах.

Расстановка точек-перехода в Krpano
Расстановка точек-перехода в Krpano

Если необходимо изменить хотспот нажимаем «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 тур со стандартным набором элементов. В следующих статьях поговорим о более глубокой настройке всех функций и рассмотрим различные интерактивные дополнения.

Vokrug3d.ru - создание виртуальных туров и 3D панорам, съемка 3D видео 360 и стерео фото, новости 3D индустрии
Добавить комментарий