通过JS动态切换大场景xml

我们在利用krpano去制作720全景图的时候,通常会遇到需要在两个大场景下切换的情况,或许我们可以通过不同链接去跳转,但是这样用户的体验效果极差,因此我们可以通过JS动态切换大场景xml,具体步骤如下:

第一步:将需要切换的场景**.xml、panos里面的文件复制到相应目录下

第二步:在tour.xml下的scene标签内定义一个可点击的热点

<hotspot name="video" url="skin/vtourskin_mapspotactive.png" scale="0.4" ath="-162.243" atv="40.839" onclick="js(loadpano('zhongye.xml','scene_lqc'););" />

第三步:在tour.html 内定义点击事件

<div id="pano" style="100%;height:100%;">
    <noscript><table style="100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
        <script>
            var krpano = null;
                embedpano({
                    swf: "tour.swf",
                    xml: "tour.xml",
                    target: "pano",
                    html5: "auto",
                    mobilescale: 1.0,
                    passQueryParameters: true,
                    onready: krpano_onready_callback
                });

            function krpano_onready_callback(krpano_interface) {
                krpano = krpano_interface;
            }

            function loadpano(xmlname,sceneName) {
                    if(krpano) {    
                                                 //动态切换xml,xmlname为tour.xml传过来的值 
                                                 krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));"); 
                                                  //sceneName为切换后加载的第一个场景
                                                 krpano.call("loadscene('" + sceneName + "')"); 
                                       } 
                        } 
              </script>
  </div>

注: loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1)一共有四个参数

第一参数:

name = 名称可以是编号

第二参数:
载入附带参数(如果没有则使用null)。可以通过&符号合并多个var1=val1的设置形

sphere=image.jpg&amp;view.fov=120&amp;view.fisheye=0.35

第三个参数:

无缝融合相似场景

onclick="loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1));"

KEEPVIEW 是保持相同的视角,包括切换前的hlookat以及vlookat和fov,blend(1)则保证了融合的速度有一秒的时间

载入时额外的标签(如果没有则使用null)。
可以使用 | 字符整合多个标签。
可用的标签:
MERGE (推荐使用)
将当前全景与新全景的所有设定相融。
如果新全景中有plugins和hotspots与需要保留的重名,则新元素不会被载入。
对于虚拟漫游推荐使用该设置。
KEEPIMAGE – 保留当前图像(仅HTML5)
KEEPVIEW – 保留当前view设置
KEEPMOVING – 在混合过程保持运动 (仅HTML5)
KEEPSCENES – 保留当前场景 (仅loadpano)
KEEPDISPLAY – 保留当前display设置
KEEPCONTROL – 保留当前control设置
KEEPPLUGINS – 保留当前已经载入的plugins
KEEPHOTSPOTS – 保留当前已经载入的hotspots
NOPREVIEW – 忽略新xml的<preview>标签
KEEPBASE – 预定义组合:
KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
KEEPALL – 预定义组合:
KEEPVIEW | KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
REMOVESCENES – 移除所有当前定义了的scene元素 (与 set(scene.count,0);作用一样 )
IGNOREKEEP – 忽略keep设定,移除所有keep=”true”的元素
IMAGEONLY – 只加载全景图像(以及预览图)(仅HTML5,不能用于loadpanoscene)

第四参数
混合淡入到下一个全景 – 转场动画。
可用的混合模式:

NOBLEND 无混合,直接切换到下一个全景(默认)。

BLEND(time, tweentype) 混合 / 淡入淡出当前全景与下一个全景。time – 以秒为单位的混合时间 (默认=2.0)。
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。

COLORBLEND(time, color, tweentype)混合至某种颜色,然后从该颜色转到下一个全景。
time – 以秒为单位的混合时间 (默认=2.0)。
color – 转场时两个全景之间的颜色,十六进制颜色值 (默认=0x000000 = 黑色)。
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。

LIGHTBLEND(time, color, colorscale, tweentype)添加或减去某种颜色,然后交叉淡化到下一个全景。
time – 以秒为单位的混合时间 (默认=2.0)。
color – 添加的颜色,十六进制颜色 (默认=0xFFFFFF = 白色)。
colorscale – 颜色的比例系数,使用负数表示减去 (默认=2.0)。
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。

SLIDEBLEND(time, angle, smooth, tweentype)在当前和下一个全景之间的幻灯片动画。
time – 以秒为单位的混合时间 (默认=2.0)。
angle – 幻灯片切换的角度 (默认=0.0)。
smooth – 转场线条的平滑/模糊程度 (0.0到 1.0, 默认=0.2)。
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。

(仅WebGL)OPENBLEND(time, shape, smooth, zoom, tweentype)在当前和下一个全景之间的展开动画。
time – 以秒为单位的混合时间 (默认=2.0)。
shape – 定义展开形状 (-1.0 到 +1.0) – 0.0=圆圈展开, -1.0=垂直展开, +1.0=水平展开 (默认=0.0)。
smooth – 转场线条的平滑/模糊程度 (0.0 到 1.0, 默认=0.2)。
zoom – 对旧全景的放大。 (0.0 到 1.0, 默认=0.0).。
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。
(Flash或仅WebGL)

ZOOMBLEND(time, zoom, tweentype)放大到当前视域,交叉淡化到下一个全景。
time – 以秒为单位的混合时间 (默认=2.0)。
zoom – 缩放因子 (默认=2.0).
tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。

原文地址:https://www.cnblogs.com/lijiapeng/p/9816486.html