默認VR和小行星代碼如下:
將其複製到xml中
<krpano>
<!-- krpano 1.19.pr8 - Virtual Tour Skin -->
<!-- skin settings (can be overridden in the tour.xml) -->
<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="true"
title="true"
thumbs="false"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="false"
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="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"
/>
<!-- save the url path of this xml file (the url value will be adjusted during xml parsing) -->
<vtourskinxmlpath url="./" />
<!-- mouse / touch / keyboard(button) control settings - http://krpano.com/docu/xml/#control -->
<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"
/>
<!-- mouse cursors - http://krpano.com/docu/xml/#cursors -->
<cursors standard="default"
dragging="move"
moving="move"
/>
<!-- ensure stagescale 2x for mobile devices (regardless if mobilescale is 0.5 or 1.0) -->
<krpano stagescale="calc:stagescale * 2" if="stagescale LT 1.0" devices="mobile" />
<!-- include VR support - http://krpano.com/plugins/webvr/ -->
<include url="%SWFPATH%/plugins/webvr.xml" devices="html5" />
<!-- overwrite some settings from the webvr.xml for the skin integration -->
<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();"
/>
<!-- webvr button style (adjust to match skin style) -->
<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 -->
<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"
/>
<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=""
/>
<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>
<action name="webvr_setup">
if(webvr.isenabled,
copy(loadscene_flags_backup, skin_settings.loadscene_flags);
set(skin_settings.loadscene_flags, MERGE|KEEPVIEW|KEEPMOVING|NOPREVIEW);
webvr_act_as_gyro_in_portrait_mode(true);
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>
<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 -->
<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" οnclick="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" οnclick="skin_nextscene_loop(+1);" visible="false" devices="html5.and.webgl" />
<!-- floating/following VR hotspots -->
<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;
var v = krpano.view.vlookat;
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;
}
]]></action>
<!-- VR support -->
<!-- skin styles -->
<!-- skin_base - the base skin image -->
<style name="skin_base" url="calc:vtourskinxmlpath.url + skin_settings.design_skin_images" />
<!-- skin_glow - button glowing (if additional ondown,onup,onout,over events are needed, this style provides ondown2,onup2,onover2,onout2 events) -->
<style name="skin_glow"
ondown="copy(skin_lockglow,name); skin_buttonglow(get(name)); if(ondown2, ondown2() );"
onover="if(skin_lockglow === null, copy(skin_lockglow,name); skin_buttonglow(get(name),0.3) ); if(onover2, onover2() );"
onout="if(skin_lockglow === name AND !pressed, skin_buttonglow(null);delete(skin_lockglow); ); if(onout2, onout2() );"
onup="if(onup2, onup2()); delayedcall(0, if(hovering AND enabled, skin_buttonglow(get(name),0.3); , skin_buttonglow(null);delete(skin_lockglow); ); );"
/>
<!-- skin_thumbtext_style - style/textfield for the (optional, skin_settings.thumbs_text) thumbnails texts -->
<!--<style name="skin_thumbtext_style" url="%SWFPATH%/plugins/textfield.swf" align="bottom" width="100%" autoheight="true" y="5" enabled="false" background="false" border="false" css="calc:skin_settings.design_text_css + ' text-align:center; font-size:10px;'" textshadow="get:skin_settings.design_text_shadow" />-->
<!-- skin_hotspotstyle - style for the hotspots -->
<!--<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" distorted="true"
tooltip=""
linkedscene=""
linkedscene_lookat=""
οnclick="();"
onover="tween(scale,0.55);"
onout="tween(scale,0.5);"
onloaded="if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); );"
/>-->
<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" crop="0|0|128|112" framewidth="128" frameheight="112" frame="0" lastframe="5" scale="0.5" oy="50" distorted="false"
οnclick="if(linkedscene, tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,MERGE,BLEND(1)); skin_updatescroll(); );"
onhover="if(skin_settings.tooltips_hotspots, if(linkedscene, showtext(get(scene[get(linkedscene)].title),SKIN_TOOLTIPS)) );"
onloaded="if(distorted,add_tooltip2(get(linkedscene),1),add_all_the_time_tooltip(get(linkedscene),1));"/>
<action name="hotspot_animate">
inc(frame,1,get(lastframe),0);
mul(ypos,frame,frameheight);
txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
delayedcall(0.03, if(loaded, hotspot_animate() ) );
</action>
<!--熱點文本信息 修改字體大小-->
<action name="add_all_the_time_tooltip">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname));
txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,top);
set(plugin[get(tooltipname)].edge,bottom);
set(plugin[get(tooltipname)].x,0);
set(plugin[get(tooltipname)].y,0);
set(plugin[get(tooltipname)].width,130);
set(plugin[get(tooltipname)].autoheight,true);
set(plugin[get(tooltipname)].background,true);
set(plugin[get(tooltipname)].backgroundcolor,0x000000);
set(plugin[get(tooltipname)].roundedge,3);
set(plugin[get(tooltipname)].backgroundalpha,0.0);
set(plugin[get(tooltipname)].border,true);
set(plugin[get(tooltipname)].glow,4);
set(plugin[get(tooltipname)].glowcolor,0xF6B017);
set(plugin[get(tooltipname)].css,'text-align:center; color:#CFE566; font-family:Arial; font-weight:bold; font-size:14px;');
set(plugin[get(tooltipname)].textshadow,1);
set(plugin[get(tooltipname)].textshadowrange,6.0);
set(plugin[get(tooltipname)].textshadowangle,90);
copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title);
set(plugin[get(tooltipname)].enabled,false);
</action>
<!-- hotspot style predefines - black hotspot -->
<!--自定義熱點-->
<style name="hotspot_ani_black"
url="hotspot_ani_black_64x64x20.png"
crop="0|0|64|64"
framewidth="64" frameheight="64" frame="0" lastframe="19"
onloaded="hotspot_animate();if(distorted,add_tooltip2(get(linkedscene),1),add_all_the_time_tooltip(get(linkedscene),1));if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); );"
οnclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
/>
<!-- hotspot style predefines - white hotspot -->
<style name="hotspot_ani_white"
url="hotspot_ani_white_64x64x20.png"
crop="0|0|64|64"
framewidth="64" frameheight="64" frame="0" lastframe="19"
onloaded="hotspot_animate();if(distorted,add_tooltip2(get(linkedscene),1),add_all_the_time_tooltip(get(linkedscene),1));if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); );"
οnclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );"
/>
<action name="skin_hotspotstyle_click">
if(linkedscene,
if(linkedscene_lookat,
txtsplit(linkedscene_lookat, ',', hs_lookat_h, hs_lookat_v, hs_lookat_fov);
);
set(enabled, false);
skin_hidetooltips();
tween(depth|alpha|oy|rx, 4000|0.0|-50|-60, 0.5, default,
skin_loadscene(get(linkedscene), get(skin_settings.loadscene_blend));
if(hs_lookat_h !== null,
skin_lookat(get(hs_lookat_h), get(hs_lookat_v), get(hs_lookat_fov));
delete(hs_lookat_h, hs_lookat_v, hs_lookat_fov);
);
skin_updatescroll();
);
);
</action>
<!-- gyro plugin -->
<plugin name="skin_gyro" keep="true" url="" html5_url="%SWFPATH%/plugins/gyro2.js" softstart="1.0" enabled="false" onavailable="skin_arrange_buttons();" devices="html5" />
<!-- skin events -->
<events name="skin_events" keep="true"
onxmlcomplete="set(events[skin_events].onxmlcomplete,null); skin_startup();"
onnewpano="skin_showloading(true); skin_update_scene_infos(); skin_deeplinking_update_url();"
onremovepano="skin_showloading(true);"
onloadcomplete="skin_showloading(false);"
onidle="skin_deeplinking_update_url();"
οnresize="skin_onresize();"
onenterfullscreen.fullscreensupport="set(layer[skin_btn_fs].crop, '64|576|64|64');"
onexitfullscreen.fullscreensupport="set(layer[skin_btn_fs].crop, '0|576|64|64');"
οnkeydοwn="skin_keydown_event();"
/>
<!-- skin actions -->
<action name="skin_startup">
<!-- apply skin settings on startup -->
if(skin_settings.thumbs,
if(skin_settings.thumbs_opened, set(layer[skin_thumbs].state,'opened'); set(layer[skin_thumbs_container].visible,true); );
copy(layer[skin_thumbs].draggable, skin_settings.thumbs_dragging);
if(skin_settings.thumbs_onhoverscrolling AND device.mouse,
set(layer[skin_thumbs].draggable, false);
set(layer[skin_thumbs].onhover_autoscrolling, true);
);
);
if(skin_settings.gyro AND !device.desktop AND device.html5,
copy(plugin[skin_gyro].url, plugin[skin_gyro].html5_url);
);
if(skin_settings.webvr AND device.html5 AND device.webgl,
copy(plugin[WebVR].url, plugin[WebVR].pluginurl);
);
if(skin_settings.maps == true,
set(layer[skin_btn_map].visible, true);
if(device.flash,
copy(layer[skin_map].key, skin_settings.maps_bing_api_key);
set(layer[skin_map].url, '%SWFPATH%/plugins/bingmaps.swf');
,
if(skin_settings.maps_type == 'bing',
copy(layer[skin_map].key, skin_settings.maps_bing_api_key);
set(layer[skin_map].url, '%SWFPATH%/plugins/bingmaps.js');
,
copy(layer[skin_map].key, skin_settings.maps_google_api_key);
set(layer[skin_map].url, '%SWFPATH%/plugins/googlemaps.js');
);
);
);
if(skin_settings.littleplanetintro AND (device.webgl OR device.flash),
skin_setup_littleplanetintro();
);
delayedcall(3,);
skin_addthumbs();
skin_onresize();
skin_updatescroll();
set(layer[skin_layer].visible, true);
</action>
<action name="skin_setup_littleplanetintro">
copy(lp_scene, xml.scene);
copy(lp_hlookat, view.hlookat);
copy(lp_vlookat, view.vlookat);
copy(lp_fov, view.fov);
copy(lp_fovmax, view.fovmax);
copy(lp_limitview, view.limitview);
set(view.fovmax, 170);
set(view.limitview, lookto);
set(view.vlookatmin, 90);
set(view.vlookatmax, 90);
lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
set(events[lp_events].onloadcomplete,
delayedcall(0.5,
if(lp_scene === xml.scene,
set(control.usercontrol, off);
copy(view.limitview, lp_limitview);
set(view.vlookatmin, null);
set(view.vlookatmax, null);
tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
3.0, easeOutQuad,
set(control.usercontrol, all);
tween(view.fovmax, get(lp_fovmax));
);
);
);
);
</action>
</krpano>
小行星功能開啓：
創建一個layer按鈕 點擊開啓VR功能:
