网上关于Krpano的学习资料比较少，像XX中文网都是VIP才可以查看，于是就打算将自己学习的东西和大家分享，有详细的注释，主要为自己的一些见解，重在分享，供大家参考，有问题的地方还请告知：）。
<krpano>
<skin_settings maps="false"
maps_type="google"
maps_bing_api_key=""
maps_google_api_key=""
maps_zoombuttons="false"
gyro="true"
webvr="true"
webvr_gyro_keeplookingdirection="false"
webvr_prev_next_hotspots="true"
littleplanetintro="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="true"
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="loading..."
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"
/>
<vtourskinxmlpath url="./" />
<control mouse="drag"
touch="drag"
zoomtocursor="false"
zoomoutcursor="false"
draginertia="0.1"
dragfriction="0.9"
movetoaccelerate="1.0"
movetospeed="10.0"
movetofriction="0.8"
keybaccelerate="0.09"
keybfriction="0.94"
keybfovchange="0.25"
mousefovchange="1.0"
fovspeed="3.0"
fovfriction="0.9"
bouncinglimits="true"
/>
<cursors standard="default"
dragging="move"
moving="move"
/>
<krpano stagescale="calc:stagescale * 2" if="stagescale LT 1.0" devices="mobile" />
<include url="%SWFPATH%/plugins/webvr.xml" devices="html5" />
<plugin name="WebVR" keep="true" devices="html5"
pluginurl="%SWFPATH%/plugins/webvr.js"
url=""
multireslock.desktop="true"
multireslock.mobile.or.tablet="false"
mobilevr_support="true"
mobilevr_fake_support="true"
onavailable="removelayer(webvr_enterbutton); skin_arrange_buttons(); webvr_onavailable();"
onentervr="skin_showloading(false); webvr_onentervr(); webvr_setup(); skin_reloadscene_webvr();"
onexitvr="webvr_onexitvr(); webvr_setup(); skin_reloadscene_webvr();"
/>
<style name="webvr_button_style"
border="false"
roundedge="calc:1.0"
backgroundcolor="get:skin_settings.design_bgcolor" backgroundalpha="get:skin_settings.design_bgalpha"
shadow="0.01" shadowrange="10.0" shadowangle="90.0" shadowcolor="0x30261B" shadowalpha="0.50"
css="calc:skin_settings.design_text_css + ' color:#FFFFFF;font-size:' + 20*webvr_setup_scale*webvr_button_scale + 'px;'"/>
-- show a 'rotate the device' info when the mobile device is in portrait orientation in VR mode -->
-- 显示屏幕旋转提示图片 devices="mobile" 只在手机模式下-->
<layer name="webvr_rotate_to_landscape_request" keep="true" vr="true" devices="mobile"
url="rotate_device.png" scale="0.5"
align="top" edge="center" y="28%"
autoalpha="true" alpha="0.0"
enabled="false"
/>
-- WebVR相关事件触发 webvr_set_startup_view 设置镜头位置 onloadcomplete根据场景数目觉得是否显示VR场景切换热点-->
<events name="webvr_events" keep="true" devices="html5"
onxmlcomplete="webvr_set_startup_view()"
onresize.mobile="webvr_act_as_gyro_in_portrait_mode();"
onloadcomplete="delayedcall(0.5, if(webvr.isenabled AND scene.count GT 1 AND skin_settings.webvr_prev_next_hotspots, set(hotspot[webvr_prev_scene].visible,true); set(hotspot[webvr_next_scene].visible,true); ); );"
onviewchange=""
/>
-- 根据VR是否打开设置镜头位置 -->
<action name="webvr_set_startup_view">
if((webvr.isenabled OR plugin[skin_gyro].enabled) AND skin_settings.webvr_gyro_keeplookingdirection == false,
skin_lookat( get(xml.view.hlookat) );
);
action>
-- 进入VR时设定 -->
<action name="webvr_setup">
if(webvr.isenabled,
-- 读取自定义设定 -->
copy(loadscene_flags_backup, skin_settings.loadscene_flags);
-- 设置为 MERGE|KEEPVIEW|KEEPMOVING|NOPREVIEW-->
set(skin_settings.loadscene_flags, MERGE|KEEPVIEW|KEEPMOVING|NOPREVIEW);
-- 打开WebVR时是否竖屏启动陀螺仪 -->
webvr_act_as_gyro_in_portrait_mode(true);
-- 读取设置是否显示VR模式下的上下按钮 并且设置跟随-->
if(scene.count GT 1 AND skin_settings.webvr_prev_next_hotspots,
set(hotspot[webvr_prev_scene].visible, true);
set(hotspot[webvr_next_scene].visible, true);
set(events[webvr_events].onviewchange, webvr_menu_following());
);
,
if(loadscene_flags_backup !== null, copy(skin_settings.loadscene_flags, loadscene_flags_backup));
tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 0.0);
set(hotspot[webvr_prev_scene].visible, false);
set(hotspot[webvr_next_scene].visible, false);
set(events[webvr_events].onviewchange, null);
);
action>
-- 打开WebVR时是否竖屏启动陀螺仪 -->
<action name="webvr_act_as_gyro_in_portrait_mode">
if(device.mobile AND webvr.isenabled,
div(aspect, stagewidth, stageheight);
if(aspect != lastaspect OR '%1' == 'true',
copy(lastaspect, aspect);
if(stagewidth GT stageheight,
-- landscape orientation - use stereo rendering and a direct/fast gyro sensor mode -->
set(display.stereo, true);
set(webvr.mobilevr_sensor_mode, 3);
webvr.update();
tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 0.0);
,
-- portrait orientation - use normal rendering and a smoother/slower gyro sensor mode -->
set(display.stereo, false);
set(webvr.mobilevr_sensor_mode, 1);
webvr.update();
tween(layer[webvr_rotate_to_landscape_request].alpha, 1.0);
delayedcall(3.0, tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 1.0); );
);
);
,
set(lastaspect, 0);
);
action>
-- VR scene switching hotspots -->
-- VR场景切换热点 distorted="true" 热点跟随场景扭曲-->
<style name="webvr_menu_style" depth="800" scale="0.5" distorted="true" ath="0" atv="45" alpha="0.5" />
<hotspot name="webvr_prev_scene" keep="true" style="skin_base|webvr_menu_style" crop="0|64|64|64" ox="-64" onover="tween(scale,0.6);" onout="tween(scale,0.5);" vr_timeout="750" onclick="skin_nextscene_loop(-1);" visible="false" devices="html5.and.webgl" />
<hotspot name="webvr_next_scene" keep="true" style="skin_base|webvr_menu_style" crop="64|64|64|64" ox="+64" onover="tween(scale,0.6);" onout="tween(scale,0.5);" vr_timeout="750" onclick="skin_nextscene_loop(+1);" visible="false" devices="html5.and.webgl" />
-- floating/following VR hotspots -->
-- 设置VR模式下跟随镜头的场景切换热点 -->
<action name="webvr_menu_following" type="Javascript" devices="html5">[CDATA[ var hs1 = krpano.get("hotspot[webvr_prev_scene]");
var hs2 = krpano.get("hotspot[webvr_next_scene]");
//头追没有移动到热点处的时候
if(!hs1.hovering && !hs2.hovering)
{
var f = 0.01; // following speed factor
var h = krpano.view.hlookat;//获取当前场景的垂直度数（垂直180°）
var v = krpano.view.vlookat;//获取当前场景的水平度数（水平360°）
var hsh = hs1.ath;
var hsv = hs1.atv;
//将度数转化为距离设置到热点上
h = (h -(h|0)) + (((h|0) +360180)%360) - 180.0;
v = (v -(v|0)) + (((v|0) +360180)%360) - 180.0;
hsh = (hsh-(hsh|0)) + (((hsh|0)+360180)%360) - 180.0;
var dh = h - hsh;
dh += (dh > 180) ? -360 : (dh < -180) ? 360 : 0
hsh += dh*f;
var a = Math.abs(v - hsv) / 90.0;
a = 1.0 * Math.max(1.0 - 2.0*Math.sqrt(a), 0);
v = v + 55.0 - v*1.5;
hsv = hsv*(1.0 - f) + v*f;
hs1.ath = hs2.ath = hsh;
hs1.atv = hs2.atv = hsv;
hs1.alpha = hs2.alpha = a;
}
]]>
