移花接木(29)- 在自制作皮肤加入VR开关

演示

点击在新窗口中观看 http://krpano360.com/wp-content/uploads/krpano/vr/tour.html

说明

大家知道,krpano 1.19最重要的特性是对VR的全面支持。因为有WebVR插件的支持,当使用了默认皮肤在支持VR的设备打开时,皮肤中会出现如上图那样的cardboard图标,表示可以点击进入到VR模式。这个基本上不用做过多的设置。但问题是,到底是哪些代码控制了这个VR开关,与VR相关的代码又都是哪些?要是自己设计的皮肤,怎样引入VR功能呢?显而易见,VR模式涉及WebVR插件,是1.19专用的官方插件,通常已经在默认生成的项目的plugins文件夹中。显然剩下的代码都在skin文件夹的vtourskin中,于是,我们把多余的代码删除就剩下下面这个vtourskin里,当然,skin文件夹重要的vtourskin图片我们没有删除,因为VR按钮就在里面。删掉了的话就显示不了。

教程更新说明:查看第二页教程,方法更简单。第一页教程可了解在默认皮肤中对VR产生作用的代码。

 

代码

仅剩下VR功能的vtourskin.xml,为了显示VR按钮,给skin_btn_vr加上keep=”true”,因为它的父元素已经被删除。同时相对调整align,对齐在底部,以及调整x和y两个属性,使其对齐在屏幕底部中央,注意这里保留了鼠标悬停时出现光晕的效果,如果你不想要,只需要style=”skin_base|skin_glow”改为style=”skin_base”,同时为了保留热点,所以默认热点样式skin_hotspotstyle也予以保留,注意目前VR仅支持distorted为true的hotspot。

 

 

如果你还是include了vtourskin.xml,同时又没有删掉对应的图片的话,你只需要调整的就是

name不用改,style应保留skin_base,crop也不用改,keep的话依据你的皮肤而定,如果你的父元素已经有了keep为true,那就不用另外再加,onclick和visible都保持不变,至于对齐相关的align、edge、x、y以及尺寸相关的scale等,你自己可以完全把控。强制显示的话,注意修改visible属性。

 

案例下载

链接:http://pan.baidu.com/s/1dDv4br7 密码:wptt

 

更简单的方式

1.保留默认皮肤,也就是保留tour.xml中的

在tour.xml的skin_settings中把thumbs设置false,这样就不会生成缩略图,减少加载的时间。

 

2.找到默认皮肤vtourskin.xml,对默认皮肤的可视化界面进行隐藏,将

改为

然后在空白处插入以下代码:

这时候在全景两侧还有两个箭头。我们可以将skin_btn_prev_fs以及skin_btn_next_fs的visible属性设置为false,进行隐藏。找到

改为

另外找到

改为

 

3.自定义VR按钮,即onclick=”webvr.enterVR();”

 

4.其它默认皮肤的代码可能会对自定义皮肤产生的影响

这一行会使得皮肤比较大,可以注释掉。