如何在自制作皮肤加入VR开关

演示

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

说明

大家知道,krpano 1.19最重要的特性是对VR的全面支持。因为有WebVR插件的支持,当使用了默认皮肤在支持VR的设备打开时,皮肤中会出现如上图那样的cardboard图标,表示可以点击进入到VR模式。这个基本上不用做过多的设置。但问题是,到底是哪些代码控制了这个VR开关,与VR相关的代码又都是哪些?要是自己设计的皮肤,怎样引入VR功能呢?显而易见,VR模式涉及到两个插件,一个WebVR插件,一个是gyro2插件。两个插件都是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。

以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章

如果你还是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 密码:

以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章

查看下页更为简单的方式