移花接木(27)- 添加陀螺仪按钮

前言

经常有人问说,你知道如何做重力感应吗?我说,会啊。那人继续说,哇!好厉害啊!

然后还会有第二个人第三个人来咨询“重力感应”的事情,我也本着最大程度的耐心告知如何去加入相关的代码,实现在手机或平板设备上的“重力感应”。虽然我知道,如果设备仅仅有重力感应传感器,是没有办法实现他们想要的效果的。

那大家都想要的“重力感应”是什么效果呢?无需通过触摸屏幕按钮或滑动,只要上下左右翻转手机或平板,屏幕上的全景图像也会随着你翻转的方向发生改变,例如你把手机往上翻(屏幕朝下,背面朝上),也就是仰着头将手机高举过头看屏幕时,我们能看到全景转到了天花板。同理,当我们让屏幕垂直向上,背面朝下,我们能看到全景中转到了地板的位置。将手机在水平方向进行翻转时则获得全景左右两个方向的观看体验。

对于第一次体会这种所谓的“重力感应”全景观看的用户来说,是十分新鲜和好玩的。这就是大家所说的体感吧。于是有些客户会特别要求制作者一定要有“重力感应”。

但如果严谨的人认真想想?只凭借重力感应传感器是不可能实现上述体验的。重力感应传感器能够监测到的一种加速度力,例如手机横屏竖屏的切换都是用到重力感应传感器。

而我们一直讲的体验其实是由陀螺仪传感器控制的。它是内部测量柯氏力的。它会告诉你手机开始动了没?往哪个角度动的?动了多少?很多手机游戏是基于陀螺仪传感器设计的,例如一些赛车游戏和射击游戏,比如狙击枪开镜状态下,用手划屏来瞄准敌人脑袋的操作精度远不如有陀螺仪直接调整机身,容易操作过度。而且手上下划拉不如陀螺仪直接瞄来得方便快捷。

应用场景与问题:

如果是普通的全景展示完全没有必要用到陀螺仪,为什么呢?因为明明可以用手指触屏快速浏览,为何一定要用陀螺仪呢?使用陀螺仪并没有给与浏览者更多不同的体验。

另外部分安卓旧设备上的支持不好也是个问题。

陀螺仪应该是增强现实的。例如我们做了一个圆明园的完整建筑的全景,当用户在参观实际的遗址时,通过陀螺仪,就能够看到当年完后的圆明园。因为既有现实的对比,又有当年的影像,只有陀螺仪才有这种身临其境的体验。

2020.5 备:目前手机端的陀螺仪需要HTTPS协议支持,请务必将网站升级到https,ios需要用户点击触发。例如加入代码

 

延伸阅读

Gyro2插件官方文档

 

代码

官方下载包路径

你电脑的路径\krpano-1.18.6\examples\plugin-examples\gyro\

你电脑的路径\krpano-1.19-pr10\viewer\examples\gyro

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

注意,1.18.6使用的是上一代插件,1.19版本使用的是gyro2插件。

 

1.19官方案例解析

点击代码窗口最右侧按钮,在新窗口打开后复制代码

如果我们去掉了作为案例使用的提示信息,实际上核心代码就是下面这些。首先是插件的加载:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

然后就是控制按钮

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

默认皮肤开启陀螺仪功能

默认皮肤开启非常简单,因为默认的情况就已经开启了,我们在tour.xml的skin_settings元素中找到

点击代码窗口最右侧按钮,在新窗口打开后复制代码

只要这里不是false,而是true,那么在陀螺仪使用正常的设备上就可以使用陀螺仪效果。

 

默认皮肤在启动时则启用陀螺仪

默认皮肤在启动时默认是关闭陀螺仪的,你需要点击一下导航菜单中的陀螺仪按钮才可以使用陀螺仪效果。如果想一开始就启用陀螺仪,那么你可以在tour.xml的include那一行的后面添加

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

陀螺仪与限制视角的冲突

首先需要明确的是,如果你使用了限制视角的代码在陀螺仪启用时是无法生效的,也就是你不希望用户看到的地方在陀螺仪下是可以被浏览到的。因此我们可以在vtourskin.xml中找到下面一句

点击代码窗口最右侧按钮,在新窗口打开后复制代码

既要满足陀螺仪本身可用又要满足没有限制视角。因此就出现这么一种情况,如果你的确没有限制视角,但使用了小行星,你会发现一开始陀螺仪按钮没有显示,切换一下场景后,陀螺仪按钮才出现。

因为在小行星的skin_setup_littleplanetintro动作中有这么两行限制视角的代码。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

这样的代码就会导致view.vlookatrange实际为0,自然不符合

点击代码窗口最右侧按钮,在新窗口打开后复制代码

但切换场景后,没有了小行星效果,也不再限制视角,因此满足条件,于是陀螺仪按钮重新出现。因此如果你没有限制视角只是用了小行星,你可以在vtourskin.xml中把

点击代码窗口最右侧按钮,在新窗口打开后复制代码

改为

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

在陀螺仪下限制视角

点击代码窗口最右侧按钮,在新窗口打开后复制代码

核心是要把camroll设置为false。

 

自定义皮肤下启用陀螺仪

直接插入以下代码即可实现无按钮控制的直接启用陀螺仪功能

点击代码窗口最右侧按钮,在新窗口打开后复制代码

例如我们有个按钮叫gyrobutton的控制陀螺仪切换的,下面的属性一定要设置。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

然后我们的gyro的部分要写成

点击代码窗口最右侧按钮,在新窗口打开后复制代码