Рубрики
Интересные фишки krpano Создание виртуальных туров в krpano

Как сделать виртуальный тур с планом этажа

В статье вы найдете подробную инструкцию, как сделать виртуальный тур с планом или картой этажа.

Руководствуясь прошлыми уроками, вы уже можете собрать собственный виртуальный тур в krpano, можете расставить хотспоты, настроить внешний вид и даже сделать активные области. Однако, немаловажная часть любого виртуального тура — карта, и в этой статье вы узнаете, как добавить карту в ваш виртуальный тур.

1. Прежде всего, вам нужен тур, сделанный при помощи стандартного дроплета MAKE VTOUR MULTIRES DROPLET в krpano. Если у вас нет такого тура, можете скачать тестовый образец у меня.

2. Прежде всего, вам понадобится план-схема этажа. Можете использовать из моего примера:

План-схема этажа для виртуального тура
План-схема этажа для виртуального тура
  1. Скопируйте это изображение в папку с виртуальным туром и переименуйте её в map.png.
  2. Также вам понадобятся вешки, скачайте этот файл и сохраните в папку с туром: Вешка для карты виртуального тура
  3. Кнопка закрытия панорамы украсит ваш виртуальный тур, тоже скачайте: Кнопка закрытия панорамы
  4. Кнопка открытия панорамы тоже пригодится, вот она: Кнопка открытия и закрытия карты

3. В папку с туром добавьте файл под названием map.xml. Можете получить его, скопировав файл tour.xml, переименовать и очистить. В документе должны остаться только следующие строки:

<krpano>
</krpano>

4. Откройте файл tour.xml и добавьте в него строки <include url=»map.xml» /> , теперь верхняя часть вашего файла tour.xml должна выглядеть так:

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />
	<include url="map.xml" />

	<!-- customize skin settings: maps, gyro, thumbnails, tooltips, layout, design, ... -->

5.  Дальнейшие изменения будем производить в файле map.xml. Откройте файл в редакторе, добавьте в него следующие строки:

<layer name="map" visible="true" url="map.png" state="closed" align="center" keep="true" handcursor="true" capture="false" >
 
 <!-- Маска для радара - контейнер -->
 <layer name="radarmask" type="container" align="lefttop" width="100%" height="100%" maskchildren="true" visible="true" keep="true" >

 <!-- Точки -->

 <layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" keep="true" />
 
 <layer name="spot2" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene2_name, null, MERGE, BLEND(1));" onhover="showtext(Название второй вешки);" keep="true" />
 
 <layer name="spot3" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene3_name, null, MERGE, BLEND(1));" onhover="showtext(Название третей вешки);" keep="true" />
 
 </layer>
</layer>

<layer name="map_button_close" url="map_button.png" keep="true" align="topright" 
 onclick="
 tween(layer[map].alpha, 0, 0.2); 
 set(layer[map_button_open].visible, true);
 set(visible, false);
 delayedcall(0.3, set(layer[map_container].visible, false, WAIT));
 " x="50" scale="0.75" alpha="0.75" crop="162|0|324|29" /> 
 
 <layer name="map_button_open" url="map_button.png" keep="true" align="topright" 
 onclick="
 tween(layer[map].alpha, 1, 0.2); 
 set(layer[map].visible, true);
 set(layer[map_button_close].visible, true);
 set(visible, false);
 " x="50" scale="0.75" alpha="1.0" visible="false" crop="0|0|162|29" /> 

<action name="closemap" >
 tween(layer[map].alpha, 0, 0.3);
 delayedcall(0.3, set(layer[map].visible, false) );
</action>
<action name="openmap" >
 set(layer[map].visible, true);
 tween(layer[map].alpha, 1, 0.3);
</action>

6. Откройте файл map.xml в фотошопе, выберите инструмент раскройка (slice tool) slice-tool

7. C его помощью нарисуйте прямоугольник из левого верхнего угла до той точки, где собираетесь поставить точку.

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

8. Дважды щелкните по прямоугольнику и обратите внимание на 2 значения. .

Координаты точки на плане этажа
Координаты точки на плане этажа

9. Впишите эти значения в первый хотспот. Ширина это X, высота это Y. Пример:

<layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="141" y="112" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" />

10. Дайте точке название, вписав его в скобки: onhover=»showtext(Первая панорама);»

11. Впишите в loadscene название сцены, которую нужно открывать при щелчке на эту точку. например: loadscene(scene_01, null, MERGE, BLEND(1));

12. Аналогичным образом сделайте все вешки. При необходимости скопируйте строки с ними (только дайте хотспотам уникальные имена)! Например: spot1 spot2 spot3 spot4

 <layer name="spot1" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene_name, null, MERGE, BLEND(1));" onhover="showtext(Название первой вешки);" keep="true" />
 
 <layer name="spot2" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene2_name, null, MERGE, BLEND(1));" onhover="showtext(Название второй вешки);" keep="true" />
 
 <layer name="spot3" url="pointer.png" align="lefttop" edge="bottom" x="" y="" zorder="2" onclick="loadscene(scene3_name, null, MERGE, BLEND(1));" onhover="showtext(Название третей вешки);" keep="true" />

Ну и всё, карта должна работать. Кнопки и хотспоты редактируйте по своему вкусу. В следующем уроке постараюсь рассказать, как сделать хотспот активным (перекрасить) и как добавить к вешкам радар.

А вот рабочий виртуальный тур с картами в моём исполнении: Виртуальный тур с планом этажа.

Вопросы задавать только в комментариях!

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

7 ответов к “Как сделать виртуальный тур с планом этажа”

Павел, добрый день.
Вы ранее писали:
— В следующем уроке постараюсь рассказать, как сделать хотспот активным (перекрасить) и как добавить к вешкам радар.

Существует у вас подобный урок или нет?

Павел, 6 пункт «Откройте файл map.xml в фотошопе» — шутка?
map.png

Павел, спасибо, полезная статья!
Подскажите, как встроить план здания с радаром в тур вроде бы понятно. Подскажите, для каждого заказчика вы сами рисуете каждый раз план его здания или может быть заказчик может предоставить что-нибудь готовое, либо может есть где-то сборник заготовок, которые можно редактировать, дорисовывать под каждое конкретное здание?
В общем вопрос, как это сделать легче всего?

Здравствуйте, Александр. По-разному бывает, иногда у заказчика уже есть красивый, отрисованный в 3д план, иногда заказчик экономит, и тогда я отрисовываю план с плана эвакуации заказчика, или по нарисованной от руки схеме.
Но иногда делаю планы при помощи программ для 3d проектирования жилища, просто создавая похожее здание. Получается симпатично, картинка объёмная. Только название своей программы сейчас не помню, помню только что она бесплатная, и я её спокойно скачал в интернете.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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