V2AS问路
vue上通过krpano.js实现360全景图
阅读原文时间：2023年10月07日阅读：36

首先贴出一些XML对应的函数，文件内容都有注释说明，

前端代码读取xml文件代码

// 初始化
window.embedpano({
xml: 0,
target: 'pano',
html5: 'only',
mobilescale: 1.0,
passQueryParameters: 'startscene,startlookat',
initvars: {
KRPANOPATH: process.env.NODE_ENV === 'development' ? '/' : '',
},
})

// 初始化完成，展示xml数据，
initKrpanoReady(tempXml, title) {
this.krpano = document.getElementById('krpanoSWFObject')
if (!this.info.toolkit) {
tempXml = tempXml.replaceAll(`ondown="hotspot_drag();"`, '')
}
// 如果是开发环境
if (process.env.NODE_ENV === 'development') {
window._CONFIG.krpanoPath = '/'
}
tempXml = tempXml.replaceAll(`url="template_action.xml"`, `url="${window._CONFIG.krpanoPath}template_action.xml"`)
tempXml = tempXml.replaceAll(`url="vtourskin.xml"`, `url="${window._CONFIG.krpanoPath}vtourskin.xml"`)
tempXml = tempXml.replaceAll(`url="images/`, `url="${window._CONFIG.krpanoPath}images/`)
this.krpano.call(`loadxml(${tempXml})`)
if (title) {
this.panoramaTitle = `${title} - 全景图浏览`
}
},


calc(local.xframes, (caller.imagewidth /128) BOR 0); calc(local.frames, xframes * ((caller.imageheight / 128) BOR 0)); def(local.frame, integer, 0); calc(caller.crop, '0|0|' + 128 + '|' + 128); setinterval(calc('crop_anim_' + caller.name), 0.03, if(caller.loaded, inc(frame); if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); ); mod(xpos, frame, xframes); div(ypos, frame, xframes); Math.floor(ypos); mul(xpos, 128); mul(ypos, 128); calc(caller.crop, xpos + '|' + ypos + '|' + 128 + '|' + 128); , clearinterval(calc('crop_anim_' + caller.name)); ); ,10);


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)].autowidth,true); set(plugin[get(tooltipname)].autoheight,true); set(plugin[get(tooltipname)].background,false); set(plugin[get(tooltipname)].border,false); set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family: PingFangSC-Medium,PingFang SC; font-weight:bold; font-size:16px;'); set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90); copy(plugin[get(tooltipname)].html,hotspot[get(name)].hotspot_title); set(plugin[get(tooltipname)].enabled,false);


spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r')); sub(drag_adjustx, mouse.stagex, hotspotcenterx); sub(drag_adjusty, mouse.stagey, hotspotcentery); asyncloop(pressed, sub(dx, mouse.stagex, drag_adjustx); sub(dy, mouse.stagey, drag_adjusty); screentosphere(dx, dy, ath, atv); copy(print_ath, ath); copy(print_atv, atv); roundval(print_ath, 3); roundval(print_atv, 3); );


js(handleClickHotSpotsEdit(get(hotspot_title),get(hotspot_type),get(print_ath),get(print_atv),get(url)));


js(handleClickHotSpotsGetAthAtv(get(print_ath),get(print_atv)));


js(handleClickHotSpotsScene(get(scene_id),get(hotspot_code))); hotspot_get_ath_atv();


js(handleClickHotSpotsDevice(get(collector_id),get(host_id),get(obj_type),get(hotspot_title),get(hotspot_code))); hotspot_get_ath_atv();


copy(print_hlookat, view.hlookat); copy(print_vlookat, view.vlookat); roundval(print_hlookat, 3); roundval(print_vlookat, 3); js(handleGetViewTohTov(get(print_hlookat),get(print_vlookat)))

下面这个文件是krpano.js默认配置项的文件，简单做了一些调整以及增加了一部分注释


<!-- 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" />

<!-- skin styles -->

<!-- skin\_base - the base skin image -->  
<style name="skin\_base" url="calc: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" type="text" align="bottom" width="100%" 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="" onclick="skin\_hotspotstyle\_click();" 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); );" />

<action name="skin\_hotspotstyle\_click" scope="local">  
    if(caller.linkedscene,  
        copy(hs\_linkedscene, caller.linkedscene);  
        if(caller.linkedscene\_lookat, txtsplit(caller.linkedscene\_lookat, ',', hs\_lookat\_h, hs\_lookat\_v, hs\_lookat\_fov); );  
        set(caller.enabled, false);  
        skin\_hidetooltips();  
        tween(caller.depth|caller.alpha|caller.oy|caller.rx, 4000|0.0|-50|-60, 0.5, default,  
            skin\_loadscene(get(hs\_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)); );  
            skin\_updatescroll();  
          );  
      );  
</action>

<!-- skin\_tooltip - style for the thumb, hotspot and mapspot tooltips -->  
<style name="skin\_tooltips" onover.mouse="copy(layer\[skin\_tooltip\].html, tooltip);  
                     set(layer\[skin\_tooltip\].visible, true);  
                     tween(layer\[skin\_tooltip\].alpha, 1.0, 0.1);  
                     asyncloop(hovering, copy(layer\[skin\_tooltip\].x,mouse.stagex); copy(layer\[skin\_tooltip\].y,mouse.stagey); );" onout.mouse="tween(layer\[skin\_tooltip\].alpha, 0.0, 0.1, default, set(layer\[skin\_tooltip\].visible,false), copy(layer\[skin\_tooltip\].x,mouse.stagex); copy(layer\[skin\_tooltip\].y,mouse.stagey); );" />

<!-- the tooltip textfield -->  
<layer name="skin\_tooltip" keep="true" type="text" parent="STAGE" visible="false" alpha="0" enabled="false" zorder="2" align="lefttop" edge="bottom" oy="-2" width="200" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="get:skin\_settings.design\_text\_shadow" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0" css="calc:skin\_settings.design\_text\_css + ' text-align:center; font-size:16px;'" html="" />

<!-- skin layout -->  
<!-- 下方控制条 -->  
<layer name="skin\_layer" keep="true" type="container" align="top" width="get:skin\_settings.layout\_width" maxwidth="get:skin\_settings.layout\_maxwidth" height="100%" maskchildren="true" visible="false" bgcapture="false" zorder="1">  
    <layer name="skin\_scroll\_window" type="container" align="bottom" width="100%" height="100%" x="0" y="calc:skin\_settings.controlbar\_offset + skin\_settings.controlbar\_height - skin\_settings.controlbar\_overlap" maskchildren="true" onloaded="skin\_calc\_opened\_closed();" zorder="1">  
        <layer name="skin\_scroll\_layer" type="container" align="bottom" width="get:skin\_settings.controlbar\_width" height="100%" x="0" y="200" y\_offset="get:skin\_settings.controlbar\_overlap" accuracy="1" bgalpha="get:skin\_settings.design\_bgalpha" bgcolor="get:skin\_settings.design\_bgcolor" bgborder="get:skin\_settings.design\_bgborder" bgroundedge="get:skin\_settings.design\_bgroundedge" bgshadow="get:skin\_settings.design\_bgshadow">  
            <layer name="skin\_title" type="text" align="lefttop" edge="leftbottom" x="4" y="0" zorder="4" enabled="false" background="false" border="false" css="calc:skin\_settings.design\_text\_css + ' text-align:left; font-style:italic; font-size:12px;'" textshadow="get:skin\_settings.design\_text\_shadow" visible="false" onautosized="skin\_video\_updateseekbarwidth();" />  
            <layer name="skin\_scroll\_container" type="container" align="lefttop" width="100%" height="100%" x="0" y="0" bgroundedge="get:skin\_settings.design\_bgroundedge" maskchildren="true">  
                <layer name="skin\_thumbs\_container" type="container" align="lefttop" width="100%" height="100%" visible="false">  
                    <layer name="skin\_thumbs\_scrollleft" style="skin\_base|skin\_glow" crop="0|64|64|64" align="lefttop" edge="left" x="5" y="50" scale="0.5" zorder="2" alpha="1.0" ondown2="asyncloop(pressed, layer\[skin\_thumbs\].scrollby(+2,0));" visible="false" />  
                    <layer name="skin\_thumbs\_scrollright" style="skin\_base|skin\_glow" crop="64|64|64|64" align="righttop" edge="right" x="5" y="50" scale="0.5" zorder="2" alpha="1.0" ondown2="asyncloop(pressed, layer\[skin\_thumbs\].scrollby(-2,0));" visible="false" />  
                    <layer name="skin\_thumbs\_scrollindicator" type="container" bgcolor="0xFFFFFF" bgalpha="0.25" align="lefttop" width="0" y="100" height="2" visible="false" enabled="false" />  
                    <layer name="skin\_thumbs" state="closed" url.html5="%$KRPANOPATH%js/scrollarea.js" direction="h" align="top" width="100%" height="100" zorder="1" onloaded="skin\_updatescroll();" onscroll="skin\_updatethumbscroll();" />  
                </layer>  
            </layer>  
        </layer>  
    </layer>  
    <layer name="skin\_splitter\_bottom" type="container" align="bottom" width="100%" height="calc:skin\_settings.controlbar\_offset + skin\_settings.controlbar\_height - skin\_settings.controlbar\_overlap" y="0" maskchildren="true" onloaded="skin\_calc\_opened\_closed();" zorder="2">  
        <layer name="skin\_control\_bar\_bg" type="container" align="bottom" width="get:skin\_settings.controlbar\_width" height="calc:skin\_settings.controlbar\_height + skin\_settings.controlbar\_overlap" x="0" y="get:skin\_settings.controlbar\_offset" bgcolor="get:skin\_settings.design\_bgcolor" bgalpha="get:skin\_settings.design\_bgalpha" bgborder="get:skin\_settings.design\_bgborder" bgroundedge="get:skin\_settings.design\_bgroundedge" bgshadow="get:skin\_settings.design\_bgshadow" />  
    </layer>  
    <layer name="skin\_control\_bar" type="container" align="bottom" width="get:skin\_settings.controlbar\_width" height="calc:skin\_settings.controlbar\_height" x="0" y="get:skin\_settings.controlbar\_offset" onloaded="skin\_calc\_opened\_closed();" zorder="3">  
        <layer name="skin\_control\_bar\_buttons" type="container" align="leftbottom" width="100%" height="get:skin\_settings.controlbar\_height">  
            <layer name="skin\_btn\_prev" style="skin\_base|skin\_glow" crop="0|64|64|64" align="left" x="5" y="0" scale="0.5" alpha="0.5" onclick="if(skin\_settings.thumbs\_loop, skin\_nextscene\_loop(-1), skin\_nextscene(-1) );" />  
            <layer name="skin\_btn\_thumbs" style="skin\_base|skin\_glow" crop="0|128|64|64" align="left" x="50" y="0" scale="0.5" ondown2="skin\_showmap(false); skin\_showthumbs();" />  
            <layer name="skin\_btn\_map" style="skin\_base|skin\_glow" crop="64|128|64|64" align="left" x="90" y="0" scale="0.5" ondown2="skin\_showthumbs(false); skin\_showmap();" visible="false" />  
            <layer name="skin\_btn\_navi" type="container" align="center" x="0" width="240" height="32">  
                <layer name="skin\_btn\_left" style="skin\_base|skin\_glow" crop="0|192|64|64" align="center" x="-100" y="0" scale="0.5" ondown2="set(hlookat\_moveforce,-1);" onup2="set(hlookat\_moveforce,0);" />  
                <layer name="skin\_btn\_right" style="skin\_base|skin\_glow" crop="64|192|64|64" align="center" x="-60" y="0" scale="0.5" ondown2="set(hlookat\_moveforce,+1);" onup2="set(hlookat\_moveforce,0);" />  
                <layer name="skin\_btn\_up" style="skin\_base|skin\_glow" crop="0|256|64|64" align="center" x="-20" y="0" scale="0.5" ondown2="set(vlookat\_moveforce,-1);" onup2="set(vlookat\_moveforce,0);" />  
                <layer name="skin\_btn\_down" style="skin\_base|skin\_glow" crop="64|256|64|64" align="center" x="+20" y="0" scale="0.5" ondown2="set(vlookat\_moveforce,+1);" onup2="set(vlookat\_moveforce,0);" />  
                <layer name="skin\_btn\_in" style="skin\_base|skin\_glow" crop="0|320|64|64" align="center" x="+60" y="0" scale="0.5" ondown2="set(fov\_moveforce,-1);" onup2="set(fov\_moveforce,0);" />  
                <layer name="skin\_btn\_out" style="skin\_base|skin\_glow" crop="64|320|64|64" align="center" x="+100" y="0" scale="0.5" ondown2="set(fov\_moveforce,+1);" onup2="set(fov\_moveforce,0);" />  
            </layer>  
            <layer name="skin\_btn\_vr" style="skin\_base|skin\_glow" crop="0|0|80|64" align="center" x="+146" y="0" scale="0.5" onclick="webvr.enterVR();" visible="false" />  
            <!-- 全屏，暂时关闭，客户端需打开 -->  
            <!-- <layer name="skin\_btn\_fs" style="skin\_base|skin\_glow" crop="0|576|64|64" align="right" x="90" y="0" scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" /> -->  
            <layer name="skin\_btn\_hide" style="skin\_base|skin\_glow" crop="0|448|64|64" align="right" x="50" y="0" scale="0.5" onclick="skin\_hideskin()" />  
            <layer name="skin\_btn\_show" type="container" bgcapture="true" align="bottom" width="100%" height="get:skin\_settings.controlbar\_height" y="calc:skin\_settings.controlbar\_height - skin\_settings.controlbar\_offset\_closed" onclick="skin\_showskin()" onhover="tween(alpha,1.0);" onout="tween(alpha,0.25);" ondown.touch="onhover();" onup.touch="onout();" visible="false" capture="false" alpha="0.0">  
                <layer name="skin\_btn\_show\_icon" style="skin\_base" crop="64|448|64|64" scale="0.5" align="bottom" y="2" enabled="false" />  
            </layer>  
            <layer name="skin\_btn\_next" style="skin\_base|skin\_glow" crop="64|64|64|64" align="right" x="5" y="0" scale="0.5" alpha="0.5" onclick="if(skin\_settings.thumbs\_loop, skin\_nextscene\_loop(+1), skin\_nextscene(+1) );" />  
        </layer>  
    </layer>

    <layer name="skin\_loadingtext" type="text" align="center" x="5" y="-5" html="get:skin\_settings.loadingtext" visible="false" background="false" border="false" enabled="false" css="calc:skin\_settings.design\_text\_css + ' text-align:center; font-style:italic; font-size:22px;'" textshadow="get:skin\_settings.design\_text\_shadow" />  
    <layer name="skin\_buttonglow" style="skin\_base" crop="64|384|64|64" align="center" x="0" y="1" scale="1.0" alpha="0.0" visible="false" enabled="false" />  
    <!-- 缩略图选择边框效果 -->  
    <layer name="skin\_thumbborder" type="container" x="calc:skin\_settings.design\_thumbborder\_padding + 3" y="calc:skin\_settings.design\_thumbborder\_padding + 3" width="calc:skin\_settings.thumbs\_width - 2\*skin\_settings.design\_thumbborder\_padding" height="calc:skin\_settings.thumbs\_height - 2\*skin\_settings.design\_thumbborder\_padding" visible="true" enabled="false" align="lefttop" bgborder="get:skin\_settings.design\_thumbborder\_bgborder" bgroundedge="get:skin\_settings.design\_thumbborder\_bgroundedge" />  
</layer>

<!-- previous/next scene buttons for the hidden skin mode -->  
<layer name="skin\_btn\_prev\_fs" keep="true" type="container" align="lefttop" x="-50" width="40" height="100%" bgcapture="true" alpha="0.25" capture="false" zorder="2" onclick="skin\_nextscene\_loop(-1);" onhover="tween(alpha,1.0);" onout="tween(alpha,0.25);" ondown.touch="onhover();" onup.touch="onout();">  
    <layer name="skin\_btn\_prev\_fs\_icon" style="skin\_base" crop="0|64|64|64" align="center" scale="0.5" enabled="false" />  
</layer>  
<layer name="skin\_btn\_next\_fs" keep="true" type="container" align="righttop" x="-50" width="40" height="100%" bgcapture="true" alpha="0.25" capture="false" zorder="2" onclick="skin\_nextscene\_loop(+1);" onhover="tween(alpha,1.0);" onout="tween(alpha,0.25);" ondown.touch="onhover();" onup.touch="onout();">  
    <layer name="skin\_btn\_next\_fs\_icon" style="skin\_base" crop="64|64|64|64" align="center" scale="0.5" enabled="false" />  
</layer>

<!-- skin events -->  
<!-- 皮肤的事件  
    onxmlcomplete XML加载完成后清除当前事件，调用第一个函数skin\_startup  
    onnewpano 加载新场景时skin\_showloading显示加载中文字 skin\_update\_scene\_infos 根据URL重新设定初始位置等信息  
    onloadcomplete 加载完成后隐藏加载中文字  
    onidle 空闲时执行URL的信息更新  
    onresize 屏幕尺寸变化时执行一次skin\_onresize，当每次加载新的pano时onresize也会被触发一次  
    onenterfullscreen onexitfullscreen 进入退出全屏时更新全屏按钮的图标  
    onkeydown 监听键盘事件-->  
<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();" onresize="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');" onkeydown="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.littleplanetintro AND (device.webgl OR device.flash),  
        skin\_setup\_littleplanetintro();  
      );  
    <!-- 增加缩略图 -->  
    skin\_addthumbs();  
    <!-- 调用onresize -->  
    skin\_onresize();  
    skin\_updatescroll();  
    <!-- 显示下方控制条 -->  
    set(layer\[skin\_layer\].visible, true);  
</action>

<!-- 增加缩略图 -->  
<action name="skin\_addthumbs">  
    if(skin\_settings.thumbs == false,  
        set(layer\[skin\_btn\_thumbs\].visible,false);  
      ,  
        copy(thumbwidth, skin\_settings.thumbs\_width);  
        copy(thumbheight, skin\_settings.thumbs\_height);  
        copy(thumbpadding, skin\_settings.thumbs\_padding);  
        copy(thumbcrop, skin\_settings.thumbs\_crop);

        add(thumbxoffset, thumbwidth, thumbpadding);  
        mul(thumbxcenter, thumbxoffset, 0.5);  
        mul(thumbbarwidth, thumbxoffset, scene.count);  
        add(thumbbarwidth, thumbpadding);  
        add(thumbbarheight, thumbpadding, thumbheight);  
        add(thumbbarheight, thumbpadding);

        if(skin\_settings.thumbs\_scrollindicator,  
            copy(layer\[skin\_thumbs\_scrollindicator\].y, thumbbarheight);  
            add(thumbbarheight, layer\[skin\_thumbs\_scrollindicator\].height);  
        );

        copy(layer\[skin\_thumbs\].height, thumbbarheight);  
        copy(layer\[skin\_thumbs\].width, thumbbarwidth);

        mul(halfheight, thumbbarheight, 0.5);  
        copy(layer\[skin\_thumbs\_scrollleft\].y, halfheight);  
        copy(layer\[skin\_thumbs\_scrollright\].y, halfheight);  
    <!-- 遍历所有scene并且根据序号设置缩略图名称，并且根据设置添加缩略图文字 -->  
    set(thumb\_cnt,0);  
        for(set(i,0), i LT scene.count, inc(i),  
            inc(thumb\_cnt);  
            txtadd(thumbname,'skin\_thumb\_',get(i));  
            addlayer(get(thumbname));  
            copy(layer\[get(thumbname)\].url, scene\[get(i)\].thumburl);  
            set(layer\[get(thumbname)\].keep, true);  
            set(layer\[get(thumbname)\].parent, 'skin\_thumbs');  
            set(layer\[get(thumbname)\].align, lefttop);  
            copy(layer\[get(thumbname)\].crop, thumbcrop);  
            copy(layer\[get(thumbname)\].width, thumbwidth);  
            copy(layer\[get(thumbname)\].height, thumbheight);  
            mul(thumbx, i, thumbxoffset);  
            add(thumbx, thumbpadding);  
            copy(layer\[get(thumbname)\].x, thumbx);  
            copy(layer\[get(thumbname)\].y, thumbpadding);  
            add(scene\[get(i)\].thumbx, thumbx, thumbxcenter);  
            copy(scene\[get(i)\].thumby, thumbpadding);  
            set(layer\[get(thumbname)\].linkedscene, get(scene\[get(i)\].name) );  
            set(layer\[get(thumbname)\].onclick, copy(layer\[skin\_thumbborder\].parent, name); skin\_loadscene(get(linkedscene),get(skin\_settings.loadscene\_blend)); );  
            if(skin\_settings.tooltips\_thumbs,  
                set(layer\[get(thumbname)\].tooltip, get(scene\[get(i)\].title) );  
                layer\[get(thumbname)\].loadstyle(skin\_tooltips);  
              );  
            if(skin\_settings.thumbs\_text,  
                txtadd(thumbtext, 'skin\_thumbtext\_', get(i));  
                addlayer(get(thumbtext));  
                layer\[get(thumbtext)\].loadstyle(skin\_thumbtext\_style);  
                set(layer\[get(thumbtext)\].keep, true);  
                set(layer\[get(thumbtext)\].parent, get(thumbname));  
                set(layer\[get(thumbtext)\].html, get(scene\[get(i)\].title));  
              );  
           );

        if(thumb\_cnt == 1,  
            set(layer\[skin\_thumbs\].align, 'lefttop');  
          );  
      );  
</action>

<action name="skin\_addmapspots">  
    for(set(i,0), i LT scene.count, inc(i),  
        if(scene\[get(i)\].lat,  
            txtadd(spotname, 'spot', get(i));  
            txtadd(spotclickevent, 'skin\_hidetooltips(); activatespot(',get(spotname),'); skin\_loadscene(', get(scene\[get(i)\].name), ',get(skin\_settings.loadscene\_blend)); skin\_updatescroll(); delayedcall(0.5,skin\_showmap(false));');  
            copy(scene\[get(i)\].mapspotname, spotname);  
            addspot(get(spotname), get(scene\[get(i)\].lat), get(scene\[get(i)\].lng), get(scene\[get(i)\].heading), false, get(spotclickevent), null);  
            if(skin\_settings.tooltips\_mapspots,  
                set(layer\[skin\_map\].spot\[get(spotname)\].tooltip, get(scene\[get(i)\].title) );  
                txtadd(layer\[skin\_map\].spot\[get(spotname)\].onover, 'set(hovering,true);',  get(style\[skin\_tooltips\].onover) );  
                txtadd(layer\[skin\_map\].spot\[get(spotname)\].onout,  'set(hovering,false);', get(style\[skin\_tooltips\].onout)  );  
              );  
          );  
      );

    if(xml.scene != null,  
        activatespot( get(scene\[get(xml.scene)\].mapspotname) );  
      ,  
        activatespot(spot0);  
      );  
    <!-- zoom and pan the map to see all spots at the same time -->  
    zoomToSpotsExtent();  
</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>

<action name="skin\_lookat">  
    if(webvr.isenabled,  
    <!-- adjust the VR prev/next hotspots for the view change -->  
    calc(hlookat\_offset, %1 - view.hlookat);  
        add(hotspot\[webvr\_prev\_scene\].ath, hlookat\_offset);  
        add(hotspot\[webvr\_next\_scene\].ath, hlookat\_offset);  
      );  
    <!-- change the view -->  
    lookat(%1, %2, %3);  
</action>

<!-- 皮肤重置位置 -->  
<action name="skin\_onresize">  
    mul(mh, area.pixelheight, -1);  
    if(layer\[skin\_thumbs\].state == 'opened', add(mh,layer\[skin\_thumbs\].height); );  
    if(layer\[skin\_map\].state    == 'opened', sub(hh,area.pixelheight,skin\_settings.controlbar\_offset); sub(hh,layer\[skin\_control\_bar\].height); sub(hh,32); add(mh,hh); add(mh,skin\_settings.controlbar\_overlap); sub(mh, layer\[skin\_scroll\_layer\].y\_offset); copy(layer\[skin\_map\].height, hh); );  
    add(mh, layer\[skin\_scroll\_layer\].y\_offset);  
    set(layer\[skin\_scroll\_layer\].y, get(mh));  
    skin\_video\_updateseekbarwidth();  
    skin\_arrange\_buttons();  
</action>

<!-- determine the visibility of the buttons and calculate their positions -->  
<action name="skin\_arrange\_buttons">  
    calc(show\_selbuttons, scene.count GT 1);  
    calc(show\_thumbutton, skin\_settings.thumbs == true);  
    calc(show\_mapbutton,  skin\_settings.maps == true);  
    calc(show\_vrbutton,   webvr.isavailable == true);  
    calc(show\_fsbutton,   device.fullscreensupport == true);

    set(lpos,6);  
    set(cpos,0);  
    if(show\_gyrobutton, dec(cpos,20));  
    if(show\_vrbutton, dec(cpos,24));  
    set(rpos,6);

    calc(show\_dirbuttons, !device.mobile AND ((area.pixelwidth + 2\*cpos) GT 520));

    copy(layer\[skin\_btn\_navi\].visible, show\_dirbuttons);

    copy(layer\[skin\_btn\_prev\].visible, show\_selbuttons);  
    copy(layer\[skin\_btn\_next\].visible, show\_selbuttons);  
    if(show\_selbuttons, inc(lpos,44); inc(rpos,44); );

    copy(layer\[skin\_btn\_thumbs\].visible, show\_thumbutton);  
    copy(layer\[skin\_btn\_thumbs\].x, lpos);  
    if(show\_thumbutton, inc(lpos,40));

    copy(layer\[skin\_btn\_map\].visible, show\_mapbutton);  
    copy(layer\[skin\_btn\_map\].x, lpos);  
    if(show\_mapbutton, inc(lpos,40));

    if(show\_dirbuttons,  
        copy(layer\[skin\_btn\_navi\].x, cpos);  
        inc(cpos,140);

        set(layer\[skin\_btn\_gyro\].align, center);  
        copy(layer\[skin\_btn\_gyro\].visible, show\_gyrobutton);  
        copy(layer\[skin\_btn\_gyro\].x, cpos);  
        if(show\_gyrobutton, inc(cpos,48));

        set(layer\[skin\_btn\_vr\].align, center);  
        copy(layer\[skin\_btn\_vr\].visible, show\_vrbutton);  
        copy(layer\[skin\_btn\_vr\].x, cpos);  
        if(show\_vrbutton, inc(cpos,80));  
      ,  
        set(layer\[skin\_btn\_gyro\].align, left);  
        copy(layer\[skin\_btn\_gyro\].visible, show\_gyrobutton);  
        copy(layer\[skin\_btn\_gyro\].x, lpos);  
        if(show\_gyrobutton, inc(lpos,40));

        set(layer\[skin\_btn\_vr\].align, left);  
        copy(layer\[skin\_btn\_vr\].visible, show\_vrbutton);  
        copy(layer\[skin\_btn\_vr\].x, lpos);  
        if(show\_vrbutton, inc(lpos,80));  
      );

    copy(layer\[skin\_btn\_hide\].x, rpos);  
    inc(rpos,40);

    copy(layer\[skin\_btn\_fs\].visible, show\_fsbutton);  
    copy(layer\[skin\_btn\_fs\].x, rpos);  
    if(show\_fsbutton, inc(rpos,40));  
</action>

<!-- 将当前的scene缩略图设置到正中央 -->  
<action name="skin\_updatescroll">  
    if(layer\[skin\_thumbs\].loaded,  
        set(cursceneindex, 0);  
        if(xml.scene, copy(cursceneindex, scene\[get(xml.scene)\].index));  
        layer\[skin\_thumbs\].setcenter(get(scene\[get(cursceneindex)\].thumbx), get(scene\[get(cursceneindex)\].thumby));  
      );  
    <!-- 设置当前场景的缩略图为选中式样 -->  
    txtadd(parentname, 'skin\_thumb\_', get(scene\[get(xml.scene)\].index));  
    if(layer\[get(parentname)\],  
        set(layer\[skin\_thumbborder\].parent, get(parentname));  
        set(layer\[skin\_thumbborder\].visible, true);  
        ,  
        set(layer\[skin\_thumbborder\].visible, false);  
    );  
</action>

<action name="skin\_updatethumbscroll">  
    copy(padding,skin\_settings.thumbs\_padding);

    if(skin\_settings.thumbs\_scrollbuttons,  
        if(loverflow GT 0, set(layer\[skin\_thumbs\_scrollleft\].visible,true),  set(layer\[skin\_thumbs\_scrollleft\].visible,false) );  
        if(roverflow GT 0, set(layer\[skin\_thumbs\_scrollright\].visible,true), set(layer\[skin\_thumbs\_scrollright\].visible,false) );  
      );

    if(skin\_settings.thumbs\_scrollindicator,  
        if(woverflow GT 0,  
            set(layer\[skin\_thumbs\_scrollindicator\].visible,true);  
            sub(iw,pixelwidth,woverflow);  
            div(pw,iw,pixelwidth);  
            div(px,loverflow,woverflow);  
            mul(pw,iw);  
            copy(layer\[skin\_thumbs\_scrollindicator\].width,pw);  
            sub(iw,pw);  
            sub(iw,padding);  
            sub(iw,padding);  
            mul(px,iw);  
            add(px,padding);  
            copy(layer\[skin\_thumbs\_scrollindicator\].x,px);  
          ,  
            set(layer\[skin\_thumbs\_scrollindicator\].visible,false);  
          );  
      );  
</action>

<!-- 更新场景信息 -->  
<action name="skin\_update\_scene\_infos">  
    if(xml.scene !== null AND scene\[get(xml.scene)\].index GE 0,  
    <!-- 设置场景名称 -->  
    if(skin\_settings.title,  
            if(title, txtadd(layer\[skin\_title\].html, get(title), ' - ', get(scene\[get(xml.scene)\].title) ); , copy(layer\[skin\_title\].html, scene\[get(xml.scene)\].title ); );  
            delayedcall(0.1, set(layer\[skin\_title\].visible,true) );  
          );  
    <!-- 如果不循环根据当前场景的序号设置切换按钮显示 -->  
    if(skin\_settings.thumbs\_loop == false,  
            if(scene\[get(xml.scene)\].index GT 0,  
                set(layer\[skin\_btn\_prev\].enabled, true);  
                set(layer\[skin\_btn\_prev\].alpha, 1.0);  
              ,  
                set(layer\[skin\_btn\_prev\].enabled, false);  
                set(layer\[skin\_btn\_prev\].alpha, 0.3);  
              );

            sub(lastsceneindex, scene.count, 1);  
            if(scene\[get(xml.scene)\].index LT lastsceneindex,  
                set(layer\[skin\_btn\_next\].enabled, true);  
                set(layer\[skin\_btn\_next\].alpha, 1.0);  
              ,  
                set(layer\[skin\_btn\_next\].enabled, false);  
                set(layer\[skin\_btn\_next\].alpha, 0.3);  
              );  
          ,  
            if(scene.count GT 1,  
                set(layer\[skin\_btn\_prev\].enabled, true);  
                set(layer\[skin\_btn\_prev\].alpha, 1.0);  
                set(layer\[skin\_btn\_next\].enabled, true);  
                set(layer\[skin\_btn\_next\].alpha, 1.0);  
              ,  
                set(layer\[skin\_btn\_prev\].enabled, false);  
                set(layer\[skin\_btn\_prev\].alpha, 0.3);  
                set(layer\[skin\_btn\_next\].enabled, false);  
                set(layer\[skin\_btn\_next\].alpha, 0.3);  
              );  
          );

        if(scene.count GT 1,  
            set(layer\[skin\_btn\_prev\_fs\].visible, true);  
            set(layer\[skin\_btn\_next\_fs\].visible, true);  
          ,  
            set(layer\[skin\_btn\_prev\_fs\].visible, false);  
            set(layer\[skin\_btn\_next\_fs\].visible, false);  
          );  
    <!-- 设置当前场景的缩略图为选中式样 -->  
    txtadd(parentname, 'skin\_thumb\_', get(scene\[get(xml.scene)\].index));  
        if(layer\[get(parentname)\],  
            set(layer\[skin\_thumbborder\].parent, get(parentname));  
            set(layer\[skin\_thumbborder\].visible, true);  
          ,  
            set(layer\[skin\_thumbborder\].visible, false);  
          );  
      );  
</action>

<action name="skin\_gotoscene">  
    if(scene\[%1\],  
        copy(cursceneindex, scene\[get(xml.scene)\].index);  
        copy(newsceneindex, scene\[%1\].index);  
        skin\_loadscene(get(newsceneindex), calc(newsceneindex LT cursceneindex ? skin\_settings.loadscene\_blend\_prev : (newsceneindex GT cursceneindex ? skin\_settings.loadscene\_blend\_next : skin\_settings.loadscene\_blend)) );  
      );  
</action>

<action name="skin\_nextscene">  
    add(newsceneindex, scene\[get(xml.scene)\].index, %1);  
    if(newsceneindex GE 0 AND newsceneindex LT scene.count,  
        skin\_loadscene(get(newsceneindex), calc(%1 LT 0 ? skin\_settings.loadscene\_blend\_prev : skin\_settings.loadscene\_blend\_next));  
      );  
</action>

<action name="skin\_nextscene\_loop">  
    add(newsceneindex, scene\[get(xml.scene)\].index, %1);  
    sub(lastsceneindex, scene.count, 1);  
    if(newsceneindex LT 0, copy(newsceneindex,lastsceneindex));  
    if(newsceneindex GT lastsceneindex, set(newsceneindex,0));  
    skin\_loadscene(get(newsceneindex), calc(%1 LT 0 ? skin\_settings.loadscene\_blend\_prev : skin\_settings.loadscene\_blend\_next));  
</action>

<!-- skin\_loadscene(scenenameorindex, blendmode) -->  
<action name="skin\_loadscene">  
    if(webvr.isenabled AND scene.count GT 1,  
        set(hotspot\[webvr\_prev\_scene\].visible, false);  
        set(hotspot\[webvr\_next\_scene\].visible, false);  
      );

    txtadd(layer\[skin\_thumbborder\].parent, 'skin\_thumb\_', get(scene\[%1\].index));  
    layer\[skin\_thumbs\].scrolltocenter(get(scene\[%1\].thumbx), get(scene\[%1\].thumby));  
    loadscene(get(scene\[%1\].name), null, get(skin\_settings.loadscene\_flags), %2);  
</action>

<action name="skin\_showloading">  
    if(display.stereo == true,  
        set(layer\[skin\_loadingtext\].visible, false);  
      ,  
        set(layer\[skin\_loadingtext\].visible, %1);  
      );  
</action>

<action name="skin\_hidetooltips">  
    set(layer\[skin\_tooltip\].alpha,0.0);  
    set(layer\[skin\_tooltip\].visible,false);  
</action>

<action name="skin\_buttonglow">  
    if('%1' !== 'null',  
        set(strength,0.7);  
        if(%2 != null, set(strength,%2));  
        set(layer\[skin\_buttonglow\].parent, %1);  
        set(layer\[skin\_buttonglow\].visible, true);  
        tween(layer\[skin\_buttonglow\].alpha, get(strength), 0.07);  
      ,  
        tween(layer\[skin\_buttonglow\].alpha, 0.0, 0.1, default,  
            set(layer\[skin\_buttonglow\].parent, null);  
            set(layer\[skin\_buttonglow\].visible, false);  
          );  
      );  
</action>

<action name="skin\_calc\_opened\_closed">  
    if(layer\[get(name)\].y\_closed === null,  
        set(layer\[get(name)\].y\_opened, get(layer\[get(name)\].y));  
        set(layer\[get(name)\].y\_closed, calc(layer\[get(name)\].y - skin\_settings.controlbar\_offset - skin\_settings.controlbar\_height + skin\_settings.controlbar\_offset\_closed));  
      );  
</action>

<action name="skin\_hideskin">  
    callwith(layer\[skin\_scroll\_window\],   skin\_calc\_opened\_closed() );  
    callwith(layer\[skin\_splitter\_bottom\], skin\_calc\_opened\_closed() );  
    callwith(layer\[skin\_control\_bar\],     skin\_calc\_opened\_closed() );

    if(layer\[skin\_map\].state    != 'closed', skin\_showmap(false);    wait(0.40); );  
    if(layer\[skin\_thumbs\].state != 'closed', skin\_showthumbs(false); wait(0.25); );

    set(hidetime, calc('%1' == 'instant' ? 0.0 : 0.5));  
    tween(layer\[skin\_scroll\_window\].y,   get(layer\[skin\_scroll\_window  \].y\_closed), get(hidetime));  
    tween(layer\[skin\_splitter\_bottom\].y, get(layer\[skin\_splitter\_bottom\].y\_closed), get(hidetime));  
    tween(layer\[skin\_control\_bar\].y,     get(layer\[skin\_control\_bar    \].y\_closed), get(hidetime));

    tween(layer\[skin\_btn\_prev\_fs\].x, 0, get(hidetime));  
    tween(layer\[skin\_btn\_next\_fs\].x, 0, get(hidetime));

    if(layer\[skin\_logo\], tween(layer\[skin\_logo\].alpha, 0.0, 0.5, default, set(layer\[skin\_logo\].visible,false)); );

    stopdelayedcall(skin\_btn\_show\_alpha);  
    set(layer\[skin\_btn\_show\].visible, true);  
    delayedcall(skin\_btn\_show\_alpha, get(hidetime), tween(layer\[skin\_btn\_show\].alpha, 0.25, 0.25); );  
</action>

<action name="skin\_showskin">  
    tween(layer\[skin\_scroll\_window  \].y, get(layer\[skin\_scroll\_window  \].y\_opened));  
    tween(layer\[skin\_splitter\_bottom\].y, get(layer\[skin\_splitter\_bottom\].y\_opened));  
    tween(layer\[skin\_control\_bar    \].y, get(layer\[skin\_control\_bar    \].y\_opened));

    tween(layer\[skin\_btn\_prev\_fs\].x, -50);  
    tween(layer\[skin\_btn\_next\_fs\].x, -50);

    if(layer\[skin\_logo\], set(layer\[skin\_logo\].visible,true); tween(layer\[skin\_logo\].alpha, 1.0); );

    stopdelayedcall(skin\_btn\_show\_alpha);  
    set(layer\[skin\_btn\_show\].visible, false);  
    delayedcall(skin\_btn\_show\_alpha, 0.25, tween(layer\[skin\_btn\_show\].alpha, 0.0, 0.0); );  
</action>

<action name="skin\_showthumbs">  
    if(%1 == null, if(layer\[skin\_thumbs\].state == 'closed', set(show,true), set(show,false)); , set(show,%1); );  
    mul(mh, layer\[skin\_scroll\_layer\].pixelheight, -1);  
    if(show,  
        set(layer\[skin\_thumbs\].state, 'opened');  
        tween(layer\[skin\_thumbs\].alpha, 1.0, 0.25);  
        add(mh, layer\[skin\_thumbs\].height);  
        add(mh, layer\[skin\_scroll\_layer\].y\_offset);  
        tween(layer\[skin\_scroll\_layer\].y, get(mh), 0.5, easeOutQuint);  
        set(layer\[skin\_thumbs\_container\].visible, true);  
        tween(layer\[skin\_thumbs\_container\].alpha, 1.0, 0.25);  
        tween(layer\[skin\_map\].alpha, 0.0, 0.25, default, set(layer\[skin\_map\].visible,false));  
      ,  
        set(layer\[skin\_thumbs\].state, 'closed');  
        tween(layer\[skin\_thumbs\].alpha, 0.0, 0.25, easeOutQuint);  
        add(mh, layer\[skin\_scroll\_layer\].y\_offset);  
        tween(layer\[skin\_scroll\_layer\].y, get(mh), 0.5, easeOutQuint, set(layer\[skin\_thumbs\_container\].visible, false););  
      );  
</action>

<action name="skin\_showmap">  
    if(%1 == null, if(layer\[skin\_map\].state == 'closed', set(show,true), set(show,false)); , set(show,%1); );  
    mul(mh, layer\[skin\_scroll\_layer\].pixelheight, -1);  
    if(show,  
        tween(layer\[skin\_thumbs\_container\].alpha, 0.0, 0.25, default, set(layer\[skin\_thumbs\_container\].visible,false));  
        set(layer\[skin\_map\].visible, true);  
        tween(layer\[skin\_map\].alpha, 1.0, 0.25);  
        set(layer\[skin\_map\].state, 'opened');  
        sub(hh,area.pixelheight,skin\_settings.controlbar\_offset);  
        sub(hh,layer\[skin\_control\_bar\].height);  
        sub(hh,32);  
        add(mh,hh);  
        sub(hh,skin\_settings.controlbar\_overlap);  
        copy(layer\[skin\_map\].height, hh);  
        tween(layer\[skin\_scroll\_layer\].y, get(mh), 0.5, easeOutQuint);  
      ,  
          if(layer\[skin\_map\].state != 'closed',  
            set(layer\[skin\_map\].state, 'closed');  
            add(mh, layer\[skin\_scroll\_layer\].y\_offset);  
            tween(layer\[skin\_map\].alpha, 0.0, 0.5, easeOutQuint);  
            tween(layer\[skin\_scroll\_layer\].y, get(mh), 0.5, easeOutQuint, set(layer\[skin\_map\].visible,false) );  
          );  
      );  
</action>

<action name="skin\_keydown\_event">  
    if(keycode == 33, skin\_nextscene\_loop(-1) );  
    <!-- Page Up   - previous scene -->  
    if(keycode == 34, skin\_nextscene\_loop(+1) );  
    <!-- Page Dowm - next scene -->  
    if(keycode == 35, skin\_gotoscene(calc(scene.count-1)) );  
    <!-- End       - last scene -->  
    if(keycode == 36, skin\_gotoscene(0) );  
    <!-- Home/Pos1 - first scene -->  
</action>

<action name="skin\_deeplinking\_update\_url">  
    if(skin\_settings.deeplinking AND (!webvr OR webvr.isenabled === false),  
        delayedcall(skin\_deeplinking\_update, calc(%1 == null ? 0.1 : %1), skin\_deeplinking\_update\_url\_process() );  
      );  
</action>

<action name="skin\_deeplinking\_update\_url\_process">  
    copy(adr, browser.location);  
    indexoftxt(qi, get(adr), '?');  
    if(qi GT 0, subtxt(adr, adr, 0, get(qi)));  
    copy(si, scene\[get(xml.scene)\].index);  
    copy(h, view.hlookat);  
    copy(v, view.vlookat);  
    copy(f, view.fov);  
    copy(d, view.distortion);  
    copy(a, view.architectural);  
    clamp(d, 0.0, 1.0);  
    clamp(a, 0.0, 1.0);  
    set(pp, calc(f LT 10 ? 6 : 2));  
    roundval(h, get(pp));  
    roundval(v, get(pp));  
    roundval(f, get(pp));  
    roundval(d, 2);  
    roundval(a, 1);  
    set(adr, calc(adr + '?startscene=' + si + '&amp;startactions=lookat('+h+','+v+','+f+','+d+','+a+');'));  
    js( history.replaceState(null, document.title, get(adr)); );  
</action>

<!-- reload the scene when there is a special image for VR -->  
<action name="skin\_reloadscene\_webvr">  
    delayedcall(0.1,  
        if(scene\[get(xml.scene)\].havevrimage,  
            copy(keeplookingdirection\_backup, skin\_settings.webvr\_gyro\_keeplookingdirection);  
            set(skin\_settings.webvr\_gyro\_keeplookingdirection, true);  
            loadscene(get(xml.scene), null, MERGE|KEEPVIEW|KEEPMOVING|KEEPPLUGINS|KEEPHOTSPOTS|NOPREVIEW, BLEND(0.5));  
            copy(skin\_settings.webvr\_gyro\_keeplookingdirection, keeplookingdirection\_backup);  
            delete(keeplookingdirection\_backup);  
          );  
      );  
</action>

<action name="skin\_video\_removecontrols">  
    stopdelayedcall(skin\_video\_delayedvisible);

    set(events\[skin\_events\].onclick, null);

    set(layer\[skin\_video\_playpause\].alpha, 0.0);  
    set(layer\[skin\_video\_controls\].visible, false);

    clearinterval(skin\_video\_seek\_updates);  
</action>

<action name="skin\_video\_updateseekbarwidth">  
    if(skin\_settings.title,  
        calc(layer\[skin\_video\_seekbar\_container\].width, 0 - (32 + layer\[skin\_title\].pixelwidth + layer\[skin\_video\_time\].pixelwidth));  
        calc(layer\[skin\_video\_seekbar\_container\].x, layer\[skin\_title\].pixelwidth + 16);  
      ,  
        calc(layer\[skin\_video\_seekbar\_container\].width, 0 - (24 + layer\[skin\_video\_time\].pixelwidth));  
        set(layer\[skin\_video\_seekbar\_container\].x, 8);  
      );  
</action>

<layer name="skin\_video\_playpause" keep="true" style="skin\_base|skin\_glow" crop="0|640|64|64" scale="0.75" align="center" alpha="0.0" autoalpha="true" state="hidden" onclick="skin\_video\_playpause\_click();" />

<!-- context menu - http://krpano.com/docu/xml/#contextmenu -->  
<contextmenu>  
    <item name="kr" caption="KRPANO" />  
    <item name="fs" caption="FULLSCREEN" />  
    <item name="cc" caption="Change Controlmode" onclick="skin\_changecontrolmode();" separator="true" />  
    <item name="nv" caption="Normal View" onclick="skin\_view\_normal();" showif="view.vlookatrange == 180" separator="true" />  
    <item name="fv" caption="Fisheye View" onclick="skin\_view\_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" />  
    <item name="sv" caption="Stereographic View" onclick="skin\_view\_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />  
    <item name="av" caption="Architectural View" onclick="skin\_view\_architectural();" showif="view.vlookatrange == 180" />  
    <item name="pv" caption="Pannini View" onclick="skin\_view\_pannini();" showif="view.vlookatrange == 180" devices="flash|webgl" />  
    <item name="lp" caption="Little Planet View" onclick="skin\_view\_littleplanet();" showif="view.vlookatrange == 180" devices="flash|webgl" />  
</contextmenu>

<action name="skin\_changecontrolmode">  
    switch(control.mouse, moveto, drag);  
    switch(control.touch, moveto, drag);  
</action>

<action name="skin\_view\_look\_straight">  
    if(view.vlookat LT -80 OR view.vlookat GT +80,  
        tween(view.vlookat, 0.0, 1.0, easeInOutSine);  
        tween(view.fov,     100, distance(150,0.8));  
      );  
    skin\_deeplinking\_update\_url(1.0);  
</action>

<action name="skin\_view\_normal">  
    skin\_view\_look\_straight();  
    tween(view.architectural, 0.0, distance(1.0,0.5));  
    tween(view.pannini,       0.0, distance(1.0,0.5));  
    tween(view.distortion,    0.0, distance(1.0,0.5));  
</action>

<action name="skin\_view\_fisheye">  
    skin\_view\_look\_straight();  
    tween(view.architectural, 0.0,  distance(1.0,0.5));  
    tween(view.pannini,       0.0,  distance(1.0,0.5));  
    tween(view.distortion,    0.35, distance(1.0,0.5));  
</action>

<action name="skin\_view\_architectural">  
    skin\_view\_look\_straight();  
    tween(view.architectural, 1.0, distance(1.0,0.5));  
    tween(view.pannini,       0.0, distance(1.0,0.5));  
    tween(view.distortion,    0.0, distance(1.0,0.5));  
</action>

<action name="skin\_view\_stereographic">  
    skin\_view\_look\_straight();  
    tween(view.architectural, 0.0, distance(1.0,0.5));  
    tween(view.pannini,       0.0, distance(1.0,0.5));  
    tween(view.distortion,    1.0, distance(1.0,0.8));  
</action>

<action name="skin\_view\_pannini">  
    skin\_view\_look\_straight();  
    tween(view.architectural, 0.0, distance(1.0,0.5));  
    tween(view.pannini,       1.0, distance(1.0,0.8));  
    if(view.distortion LT 0.1,  
        tween(view.distortion, 1.0, distance(1.0,0.8));  
      );  
</action>

<action name="skin\_view\_littleplanet">  
    tween(view.architectural, 0.0, distance(1.0,0.5));  
    tween(view.pannini,       0.0, distance(1.0,0.5));  
    tween(view.distortion,    1.0, distance(1.0,0.8));  
    tween(view.fov,           150, distance(150,0.8));  
    tween(view.vlookat,        90, distance(100,0.8));  
    add(new\_hlookat, view.hlookat, 123.0);  
    tween(view.hlookat, get(new\_hlookat), distance(100,0.8));  
    skin\_deeplinking\_update\_url(1.0);  
</action>

这一段代码是主要写怎么生成对应的xml文件，也就是新增和编辑功能，以及一下全景图视角和缩放比例的设置

后面再贴一下vue页面对应的代码

后面再贴一下实现效果图

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章