把krpano右键菜单的视角效果做成导航栏形式

标签: krpano  右键菜单  导航栏

效果如下:

PC端


这里写图片描述


移动端效果更佳


这里写图片描述



怎么做的?

我们通常把全景图拖拽进krpano生成一个vtour的文件夹, 访问入口是tour.xml,而tour.xml里面又引用skin/vtourskin.xml ,vtourskin.xml定义了krpano的默认皮肤,如果想在默认皮肤上盖动,就要修改vtourskin.xml的内容。

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

要怎样修改vtourskin.xml的内容?先不急,看看在krpano中文网初级教程里面的第4节使用导航栏按钮:http://www.krpano360.com/yihuajiemu4-shiyongdaohangtiaoanniu/ 介绍了如何添加导航栏。大致分为3步:

这里写图片描述

  • 修改tour.xml里面的内容,将默认皮肤改为<include url="skin/buttonsbar-include.xml" />

这样修改后,再次进入tour.xml就是导航栏的界面了,可是没有默认界面的各种视角效果,所以可以考虑把buttonsbar-include.xml和vtourskin.xml合并在一起,既具有导航栏功能,又具有各种视角效果,然后把导航栏的onclick事件绑定为相应的视角选项,最后再将vtourskin.png图片的图标改为各种视角图标即可。

我们修改vtourskin.xml即可

  • 将buttonsbar-include.xml里面的代码拷贝到vtourskin.xml中,放在靠前点,将每个button的onclick事件改为各个视角效果事件

  • 去掉vtourskin.xml原本的皮肤代码和事件

<!-- skin styles -->的一大段代码去掉
  • 重新在tour.xml引入vtourskin.xml
<include url="skin/vtourskin.xml" />
  • 最终整合后的vtourskin.xml
<krpano>

    <!-- krpano 1.19.pr9 - 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="false"
                   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="true"
                   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="./" />



    <!-- <style name="button" type="container" align="lefttop" edge="center" width="40" height="40" bgcolor="0x000000" bgalpha="0.5" bgcapture="true" children="false" scalechildren="true" onover="tween(scale,1.2,0.1);" onout="tween(scale,1,0.1);" /> -->
    <style name="button" url="button.png" align="lefttop" edge="center" children="false" scalechildren="true" onover="tween(scale,1.2,0.1);" onout="tween(scale,1,0.1);" />

    <!-- use the textfield with border, background, rounded edges and shadow as container for the buttons -->
    <layer name="buttonbar" type="container" width="250" height="50" align="bottom" y="10" keep="true">
        <layer name="lb" style="button" x="20" y="20" onclick="skin_view_normal();"        showif="view.vlookatrange == 180" separator="true">
            <layer name="lico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="0|192|64|64" />
        </layer>
        <layer name="rb" style="button" x="58" y="20" onclick="skin_view_fisheye();"       showif="view.vlookatrange == 180" devices="flash|webgl">
            <layer name="rico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="64|192|64|64" />
        </layer>
        <layer name="ub" style="button" x="96" y="20" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl">
            <layer name="uico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="0|256|64|64" />
        </layer>
        <layer name="db" style="button" x="134" y="20" onclick="skin_view_pannini();"       showif="view.vlookatrange == 180" devices="flash|webgl">
            <layer name="dico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="64|256|64|64" />
        </layer>
        <layer name="ib" style="button" x="172" y="20" onclick="skin_view_littleplanet();"  showif="view.vlookatrange == 180" devices="flash|webgl">
            <layer name="iico"  url="vtourskin.png" scale="0.5" align="lefttop" x="6" y="4" crop="0|320|64|64" />
        </layer>
        <layer name="ob" style="button" x="210" y="20" onclick="webvr.enterVR();" >
            <layer name="oico"  url="vtourskin.png" scale="0.5" align="lefttop" x="6" y="4" crop="64|320|64|64" />
        </layer>
        <layer name="fs" style="button" x="248" y="20" onclick="switch(fullscreen);" devices="fullscreensupport">
            <layer name="ofico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="0|576|64|64"  visible="true" />
            <layer name="cfico"  url="vtourskin.png" scale="0.5" align="lefttop" x="4" y="4" crop="64|576|64|64" visible="false" />
        </layer>
    </layer>

    <!-- events to change the fullscreen buttons -->
    <events name="buttonbarevents" keep="true" devices="fullscreensupport"
            onxmlcomplete="buttonbar_update_fullscreenbuttons();" 
            onenterfullscreen="buttonbar_update_fullscreenbuttons();"
            onexitfullscreen ="buttonbar_update_fullscreenbuttons();"
            />

    <action name="buttonbar_update_fullscreenbuttons">
        if(fullscreen,
            set(layer[ofico].visible,false);
            set(layer[cfico].visible,true);
          ,
            set(layer[ofico].visible,true);
            set(layer[cfico].visible,false);
          );
    </action>


    <!-- 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" 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 -->
    <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_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); );"
           />




    <!-- 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();"
            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.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();
          );

        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>




    <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>


    <!-- context menu - http://krpano.com/docu/xml/#contextmenu -->
    <contextmenu>
        <item name="kr" caption="KRPANO"     />
        <item name="fs" caption="FULLSCREEN" />
        <item name="cc" caption="更改控制模式" onclick="skin_changecontrolmode();"  separator="true" />
        <item name="nv" caption="正常视角"        onclick="skin_view_normal();"        showif="view.vlookatrange == 180" separator="true"      />
        <item name="fv" caption="鱼眼视角"       onclick="skin_view_fisheye();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="sv" caption="立体视角" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="av" caption="建筑视角" onclick="skin_view_architectural();" showif="view.vlookatrange == 180"                       />
        <item name="pv" caption="帕尼尼视角"       onclick="skin_view_pannini();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="lp" caption="小行星视角" onclick="skin_view_littleplanet();"  showif="view.vlookatrange == 180" devices="flash|webgl" />
    </contextmenu>
    <!-- 
    <item name="kr" caption="KRPANO"     />
        <item name="fs" caption="FULLSCREEN" />
        <item name="cc" caption="更改控制模式" onclick="skin_changecontrolmode();"  separator="true" />
        <item name="nv" caption="正常视角"        onclick="skin_view_normal();"        showif="view.vlookatrange == 180" separator="true"      />
        <item name="fv" caption="鱼眼视角"       onclick="skin_view_fisheye();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="sv" caption="立体视角" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="av" caption="建筑视角" onclick="skin_view_architectural();" showif="view.vlookatrange == 180"                       />
        <item name="pv" caption="帕尼尼视角"       onclick="skin_view_pannini();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
        <item name="lp" caption="小行星视角" onclick="skin_view_littleplanet();"  showif="view.vlookatrange == 180" devices="flash|webgl" />

     -->


<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>


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

<action name="cm_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));
      );
</action>

<action name="cm_normal_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini,       0.0, distance(1.0,0.5));
    tween(view.fisheye,       0.0, distance(1.0,0.5));
</action>

<action name="cm_architectural_view">
    cm_look_straight();
    tween(view.architectural, 1.0, distance(1.0,0.5));
    tween(view.pannini,       0.0, distance(1.0,0.5));
    tween(view.fisheye,       0.0, distance(1.0,0.5));
</action>

<action name="cm_fisheye_view">
    cm_look_straight();
    tween(view.architectural, 0.0,  distance(1.0,0.5));
    tween(view.pannini,       0.0,  distance(1.0,0.5));
    tween(view.fisheye,       0.35, distance(1.0,0.5));
</action>

<action name="cm_stereographic_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini,       0.0, distance(1.0,0.5));
    tween(view.fisheye,       1.0, distance(1.0,0.8));
</action>

<action name="cm_pannini_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini,       1.0, distance(1.0,0.8));
    if(view.fisheye LT 0.1,
        tween(view.fisheye, 1.0, distance(1.0,0.8));
      );
</action>

<action name="cm_littleplanet_view">
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini,       0.0, distance(1.0,0.5));
    tween(view.fisheye,       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));
</action>
</krpano>
  • 找UI将上下箭头…的图标替换成各种视角的图标


这样就成功了,但是如果要将krpano功能化,参考上上篇博客:http://blog.csdn.net/change_on/article/details/77373644,如果报错了,找不到webvr.xml,改改vtourskin.xml中webvr.xml的路径即可,很简单的!

版权声明:本文为change_on原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/change_on/article/details/77564093

智能推荐

fluent-ffmpeg在electron框架中实现推流

需要准备这几个东西 electron框架 ffmpeg.exe应用程序 链接:https://pan.baidu.com/s/1TyzYlWG0p7cxpqrzziVRCA  提取码:ofd2(也可自行去官网下载) fluent-ffmpeg插件 一个rtmp流地址 首先要做以下几步操作 1.将ffmpeg.exe文件放到electron项目文件夹中 2.安装插件和electron框架并...

bireme数据源同步工具--debezium+kafka+bireme

1、介绍 Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具。目前支持 MySQL、PostgreSQL 和 MongoDB 数据源 官方介绍文档:https://github.com/HashDataInc/bireme/blob/master/README_zh-cn.md 1、数据流 Bireme 采用 DELETE + COPY 的方式,将数据源的修改记...

一致性hash算法

散列(hash)在我看来就是一个数组,而与数组不同的点在于数组是按顺序写入的,而hash是按照一定的hash算法确定元素在数组中的位置的。hash最难的问题在于会有冲突出现,如果两个object根据相应的hash算法得出的值一样便产生了hash冲突。在所有解决hash冲突的方法中,我最欣赏的是链式解决法,即将hash到同一位置的元素用链表连接。当然还有其它几种处理hash冲突的算法,比如建立公共溢...

OpenCV-Python learning-1.安装,图片读取显示

1. OpenCV与OpenGL区别 https://www.zhihu.com/question/20212016 一个是让机器识别东西的,OpenCV是给电脑做眼睛的。 一个是让机器计算出更好画面的,OpenGL用在游戏渲染方面很多。 OpenCV(Open Source Computer Vision Library)是一个基于(开源)发行的跨平台计算机视觉库,OpenGL(全写Open G...

Mycat+Mysql分布式架构改造和性能压力测试

架构实现 Mycat作为数据库高可用中间件具备很多的功能,如负载均衡,分库分表,读写分离,故障迁移等。结合项目的实际情况,分库分表功能对于关联查询有很高的要求,需要从业务角度考虑分库分表后的关联查询SQL的分析,业务代码动作较大,所以在此方案中我们不考虑分库分表。主要应用Mycat的负载均衡及故障迁移的功能即可。 整个架构改造包括两个部分,第一是单例Mysql改为多个Mysql,同时负载均衡,并且...

猜你喜欢

人脸识别之疲劳检测(二)阈值法、KNN分类和K-means聚类

Table of Contents 1、均值法 2、中值法 3、KNN 4、K-means 结合上一节在获得人眼特征点后需要对睁眼闭眼状态做出判断,方法的选择需要经验结合公平的评价方法,使用大量测试集得到不同方法下的精确度并做出比较: 1、均值法 50帧睁眼数据取均值,得到不同阈值下精确度。 2、中值法 50帧睁眼数据取中值,得到不同阈值下精确度。 3、KNN KNN是一种ML常用分类算法,通过测...

CodeForce Tic-Tac-Toe

Two bears are playing tic-tac-toe via mail. It's boring for them to play usual tic-tac-toe game, so they are a playing modified version of this game. Here are its rules. The game is played on the foll...

Python雾里看花-抽象类ABC (abstract base class)

首先认识模块 abc,python中没有提供抽象类与抽象方法,然而提供了内置模块abc来模拟实现抽象类,例如提供泛映射类型的抽象类 abc.MutableMapping 继承abc.MutableMapping构造一个泛映射类型(类似python中的dict) 当然继承abc.Mapping 也可以,毕竟MutableMapping是其子类 dict是python中典型的映射类型数据结构,其接口的...

python 文件操作

2, with open (‘xx.txt’,‘w’,encoding=‘utf-8’) as f: f.write(‘文件内容或对象’)...

【Python基础】使用统计函数绘制简单图形

机器学习算法与自然语言处理出品 @公众号原创专栏作者 冯夏冲 学校 | 哈工大SCIR实验室在读博士生 2.1 函数bar 用于绘制柱状图 2.2 函数barh 用于绘制条形图 2.3 函数hist 用于绘制直方图 直方图与柱状图的区别 函数pie 用于绘制饼图 2.5 函数polor 用于绘制极线图 极线图是在极坐标系上绘出的一种图。在极坐标系中,要确定一个点,需要指明这个点距原点的角...