通过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="width:100%;height:100%;"> <noscript><table style="width: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&view.fov=120&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。