我们在使用Krpano进行多场景切换时,存在下面这种情况,如果有A、B、C三个场景,从A场景可以跳转B场景,从C场景也可以跳转B场景,但是要求从A进入B的视角和从C进入B的视角不一样,这种就要求我们要实现切换场景时能够自定义即将要进入场景中的默认视角,该功能是比较常见的开发需求,具体效果如下:
如上图所示,“02前台区”场景是中间场景,当从左侧“21-北走廊口”场景进入“02前台区”场景时,要求进入后前台场景默认的视角是朝向当前场景热点方向,如果从“03-前台大屏区”场景回到“02前台区”场景,也是要求朝向当前场景的热点方向,但是这两个热点的方向是相反的,此时,就要求我们在跳转场景时,要传递下一场景的默认视角。
因为是点击热点时切换场景,所以对热点点击事件进行改造,具体代码如下:
<!-- 切换场景动画效果 -->
<action name="skin_hotspot_click">
if(linkedscene,
tween(scale,0.25,0.5);
tween(oy,-20,0.5);
tween(alpha,0,0.5);
zoomto(60,smooth(300,300,300));
loadscene(get(linkedscene),null,MERGE,OPENBLEND(0.5,-0.5, 0.3, 0.8, linear),
<!-- 设置要跳转场景的视角和fov -->
if(%1 OR %1==0,set(view.hlookat,%1));
if(%2,set(view.fov,%2));
);
skin_updatescroll();
);
</action>
上述代码中,在loadscene中添加了两行代码,主要作用就是在跳转场景时配置下一场景的视角
<!-- 设置要跳转场景的视角和fov -->
if(%1 OR %1==0,set(view.hlookat,%1));
if(%2,set(view.fov,%2));
这里%1表示skin_hotspot_click事件在被调用时传入的第一个参数用来表示水平方向的视角,%2表示skin_hotspot_click事件在被调用时传入的第二个参数用来表示当前视角是否需要缩放。
下面代码是调用skin_hotspot_click事件时的传参示例:
<style name="skin_hotspotstyle"
url="./images/enter.png"
crop="0|0|128|112"
framewidth="128"
frameheight="112"
frame="0"
lastframe="4"
scale="0.5"
oy="50"
onclick="skin_hotspot_click(get(hlookat),get(fov));"
onhover="if(linkedscene, showtext(get(scene[get(linkedscene)].title),STYLE4))"
onloaded="hotspot_animate();add_all_the_time_tooltip(get(linkedscene),1));"
/>
在热点的被点击事件中调用skin_hotspot_click函数,并将传入hlookat作为第一个参数,fov为第二个参数,这里的get(hlookat)和get(fov)分别表示当前热点标签中设置的hlookat和fov值,示例如下:
<!-- 添加跳转02前台区场景热点 -->
<hotspot name="spot1"
style="skin_hotspotstyle"
ath="-90"
atv="5"
linkedscene="scene_02xjnxpwxmg"
linkedscene_hoffset="0.0"
hlookat="-90"
use3dtransition="true" />
上述热点的作用是从“03-前台大屏区”场景跳转到“02前台区”场景,这里热点标签中的hlookat属性即可被点击事件中获取,(注意:如果没有设置hlookat或者fov时,获取1%和2%为null,所以使用前先判断是否为空)
注意点:获取并设置下一进入场景的视角时,是在loadscene的回调中进行的,这里的回调位置表示下一场景被加载结束的回调,否则可能设置不成功。(踩坑教训)
原文链接:https://juejin.cn/post/7229899593261236279 作者:zhangmeng