PanoCamAdder 3D Depthmap Tour Tutorial


In this tutorial I will show you how to create a 3D-Depthmap Virtual Tour with 3D-transitions.
I have prepared a xml-template, so this will be done very quickly!

All you need is KRpano, Blender, PanoCamAdder+ and some panoramas with 3D-depthmaps.

If you like, you can download the free PanoCamAdder Example Files (three panoramas and a Blend-file with all three PanoCams well placed).

01: Create KRpano VTOUR

Create a KRpano VTOUR with the panoramas. We will use the folder structure and edit the tour-xml later on.
I like to store the models in the corresponding pano-tiles folder.


If you have created the models with PanoCamAdder, you can prepare them for KRpano very quickly:

  • Select the model first.
  • Than select the PanoName_HANDLE while holding the [SHIFT] key.
  • Press „Make Exportready“ and safe your file as STL or OBJ (if you want to export as STL, don’t forget to tick „Ascii“ and „Selection Only“).

To prepare the other panorama-models, undo the Make Exportready operation – and repeat all the steps.

02: Create the Tour.blend

For creating a 3D depthmap virtual tour, it is very importent to know the exact location and rotation for each panorama!
This can be done by importing all finished models into one Blend-file and arranging them in the 3D space.


Later on we can read out the values – and print out some helpfull xml-code with PanoCamAdder+!

03: Create the tour.xml

To make it as simple as possible, I have prepared a xml-template with some simplyfied codes from the KRpano Abu Simpbel example.
It contains some events and actions for automaticly loading the first panorama-scene, an action for nice 3D transitions and a hotspot-style for quick adding and testing the hotspots.

<!-- startup action - load the first scene -->
<events name="tourevents" keep="true" onxmlcomplete="setup_first_scene();"/>	
<action name="setup_first_scene" scope="local">
	set(view, tx=get(image.ox), ty=get(image.oy), tz=get(image.oz)); 
	set(events[tourevents].onxmlcomplete, null); set(events[tourevents].onloadcomplete) );
<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() );

<!-- 3D Transition  -->
<action name="tour3d_loadscene" scope="local" args="scenename">
	loadscene(get(scenename), null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1.0));
	if (global.customtransition != 'SKIP', if(global.customtransition !== null, global.customtransition(); , 
	tween(view.tx|view.ty|, calc(image.ox + '|' + image.oy + '|' + image.oz), 2.0, easeinoutsine); ); ); 
	delete(global.customtransition); delete(global.customtransitiontime); 

<!-- HotSpotSTYLE  -->
<style name="PCAtest" keep="false" type="text"
	css="font-size:60px;text-align:center;" vcenter="true" html="▲"
	width="200" height="100" scale="0.17" alpha="0"
	bgcolor="0xFFFF00" bgroundedge="50" bgborder="2 0x000000 1" 
	oversampling="2" mipmapping="true" zorder="1"
	distorted="true" depth="0" depthbuffer="true"
	torigin="world" rotationorder="xzy"
	onloaded.addevent="delayedcall(1.0, tween(alpha,0.8); );"
	onover.addevent="set(bgcolor,0xFF0099); tween(alpha,1.0);"
	onout.addevent="set(bgcolor,0xFFFF00); tween(alpha,0.8);"


Insert the template codes:

Edit the tour.xml in the VTOUR folder: Delete anything apart from the <scenes/> and insert the template-code on top.

Place the panorama in the KRpano 3D space:

The panorama-scenes can be located in the 3D space with image.prealign; ox; oy; oz.
To get the values, select a model in the Tour.blend and just read them out with PanoCamAdder+ in the „KRpano Values“ panel.

It is also possible to print a „style“ code, containing all those values at once!

<style name="Style_Pano 01" prealign="-0.0|5.1174|0.0" ox="-391.9599" oy="0.0" oz="444.6112" linkedscene="Scene_Pano 01" />

Add hotspots:

Use the PanoCamAdder+ to add hotspot-placeholders inside the Tour-blend-file.
Place the hotspots in the KRpano 3D space:
Select a hotspot and read out the tx; ty; tz; and rx; ry; rz values in the KRpano Values Panel.

It is also possible, to print a preformed <hotspot/> code!

<hotspot name="HS_01-02" style="" tx="-211.6786" ty="124.5168" tz="467.8584" rx="-90.0" ry="89.85" rz="-0.0"/>

I stored a „Hotspot-Style“ in the xml-template. Apply it (or create your own) to the hotspots to make them visible. If you want to create your own hotspot-style, be sure to set rotationorder=“xzy“ !

Add 3D transitions

The template-xml contains an <action/> called „tour3d_loadscene“. Activate the action per „onclick=“tour3d_loadscene(YourScene_Name);“

The complete <hotspot/> code should look like this:

<hotspot name="HS_01-02" style="PCAtest" tx="-211.6786" ty="124.5168" tz="467.8584" rx="-90.0" ry="89.85" rz="-0.0" onclick="tour3d_loadscene(scene_Pano_02);" />

Done! 🙂


Schreibe einen Kommentar

Spamschutz. Bitte die Aufgabe lösen * Time limit is exhausted. Please reload CAPTCHA.