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

客官°小女子只卖身不卖艺 2022-06-09 02:27 501阅读 0赞

## **效果如下：** ##

### **PC端** ###

![这里写图片描述][SouthEast]

### **移动端效果更佳** ###

![这里写图片描述][SouthEast 1]

**怎么做的？**

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

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

*  下载krpano1.18.6：[http://www.krpano360.com/krpanodonwload/][http_www.krpano360.com_krpanodonwload]
 *  解压后在krpano-1.18.6\\examples\\xml-usage\\buttonsbar 中复制buttonsbar-include.xml和vtourskin.png到skin中

![这里写图片描述][SouthEast 2]

*  修改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原本的皮肤代码和事件

将的一大段代码去掉

*  重新在tour.xml引入vtourskin.xml

*  最终整合后的vtourskin.xml

<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="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"
                       />
    
    
        
        <vtourskinxmlpath url="./" />
    
    
    
        
        <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);" />
    
        
        <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 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>
    
    
        
        <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;'"
               />
    
        
        <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,
                        
                        set(display.stereo, true);
                        set(webvr.mobilevr_sensor_mode, 3);
                        webvr.update();
                        tween(layer[webvr_rotate_to_landscape_request].alpha, 0.0, 0.0);
                      ,
                        
                        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>
    
        
        <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" />
    
        
        <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>
        
    
    
    
        
        <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); );"
               />
    
    
    
    
        
        <plugin name="skin_gyro" keep="true" url="" html5_url="%SWFPATH%/plugins/gyro2.js" softstart="1.0" enabled="false" onavailable="skin_arrange_buttons();" devices="html5" />
    
    
        
        <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();"
                />
    
    
        
        <action name="skin_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) );                
            if(keycode == 34, skin_nextscene_loop(+1) );                
            if(keycode == 35, skin_gotoscene(calc(scene.count-1)) );    
            if(keycode == 36, skin_gotoscene(0) );                      
        </action>
    
    
        
        <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>
        
    
    
    <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][http_blog.csdn.net_change_on_article_details_77373644]，如果报错了，找不到webvr.xml，改改vtourskin.xml中webvr.xml的路径即可，很简单的！** ###

[SouthEast]: /images/20220609/b80cf3127b0144269003c6368974939d.png
[SouthEast 1]: /images/20220609/ee4d55ca54124935ba1a156108010507.png
[http_www.krpano360.com_yihuajiemu4-shiyongdaohangtiaoanniu]: http://www.krpano360.com/yihuajiemu4-shiyongdaohangtiaoanniu/
[http_www.krpano360.com_krpanodonwload]: http://www.krpano360.com/krpanodonwload/
[SouthEast 2]: /images/20220609/26b1e4425f984cdaa9c87bca5372f288.png
[http_blog.csdn.net_change_on_article_details_77373644]: http://blog.csdn.net/change_on/article/details/77373644