前言
经常有人问说,你知道如何做重力感应吗?我说,会啊。那人继续说,哇!好厉害啊!
然后还会有第二个人第三个人来咨询“重力感应”的事情,我也本着最大程度的耐心告知如何去加入相关的代码,实现在手机或平板设备上的“重力感应”。虽然我知道,如果设备仅仅有重力感应传感器,是没有办法实现他们想要的效果的。
那大家都想要的“重力感应”是什么效果呢?无需通过触摸屏幕按钮或滑动,只要上下左右翻转手机或平板,屏幕上的全景图像也会随着你翻转的方向发生改变,例如你把手机往上翻(屏幕朝下,背面朝上),也就是仰着头将手机高举过头看屏幕时,我们能看到全景转到了天花板。同理,当我们让屏幕垂直向上,背面朝下,我们能看到全景中转到了地板的位置。将手机在水平方向进行翻转时则获得全景左右两个方向的观看体验。
对于第一次体会这种所谓的“重力感应”全景观看的用户来说,是十分新鲜和好玩的。这就是大家所说的体感吧。于是有些客户会特别要求制作者一定要有“重力感应”。
但如果严谨的人认真想想?只凭借重力感应传感器是不可能实现上述体验的。重力感应传感器能够监测到的一种加速度力,例如手机横屏竖屏的切换都是用到重力感应传感器。
而我们一直讲的体验其实是由陀螺仪传感器控制的。它是内部测量柯氏力的。它会告诉你手机开始动了没?往哪个角度动的?动了多少?很多手机游戏是基于陀螺仪传感器设计的,例如一些赛车游戏和射击游戏,比如狙击枪开镜状态下,用手划屏来瞄准敌人脑袋的操作精度远不如有陀螺仪直接调整机身,容易操作过度。而且手上下划拉不如陀螺仪直接瞄来得方便快捷。
应用场景与问题:
如果是普通的全景展示完全没有必要用到陀螺仪,为什么呢?因为明明可以用手指触屏快速浏览,为何一定要用陀螺仪呢?使用陀螺仪并没有给与浏览者更多不同的体验。
另外部分安卓旧设备上的支持不好也是个问题。
陀螺仪应该是增强现实的。例如我们做了一个圆明园的完整建筑的全景,当用户在参观实际的遗址时,通过陀螺仪,就能够看到当年完后的圆明园。因为既有现实的对比,又有当年的影像,只有陀螺仪才有这种身临其境的体验。
2020.5 备:目前手机端的陀螺仪需要HTTPS协议支持,请务必将网站升级到https,ios需要用户点击触发。例如加入代码
1 |
<events name="gyroscope" keep="true" devices="ios" onclick="set(plugin[gyroscope].enabled,true);" /> |
延伸阅读
代码
官方下载包路径
你电脑的路径\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官方案例解析
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<krpano> <plugin name="gyro" devices="html5" url="%SWFPATH%/plugins/gyro2.js" enabled="false" onavailable="gyro_available_info();" onunavailable="gyro_not_available_info();" /> <action name="gyro_available_info"> set(layer[infotext].html, 'Gyroscope available, press the gyro button...'); set(layer[gyrobutton].visible, true); </action> <action name="gyro_not_available_info" xautorun.flash="onstart"> set(layer[infotext].html, 'No gyroscope available...'); </action> <view hlookat="0" vlookat="0" fovmin="60" fov="100" fovmax="150" /> <!-- the pano image --> <preview url="preview.jpg" /> <image> <cube url="pano_%s.jpg" /> </image> <layer name="bottombar" type="container" bgcolor="0x000000" bgalpha="0.5" align="leftbottom" width="100%" height="40"> <layer name="infotext" url="%SWFPATH%/plugins/textfield.swf" background="false" border="false" enabled="false" html="" css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:14px; font-weight:bold;" align="left" x="10" height="100%" vcenter="true" /> <layer name="gyrobutton" url="gyroicon.png" scale="0.5" align="right" x="10" visible="false" onclick="switch(plugin[gyro].enabled);" /> </layer> </krpano> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 |
<plugin name="gyro" devices="html5" url="%SWFPATH%/plugins/gyro2.js" enabled="false" onavailable="gyro_available_info();" /> <action name="gyro_available_info"> set(layer[gyrobutton].visible, true); </action> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
<layer name="gyrobutton" url="gyroicon.png" scale="0.5" align="right" x="10" visible="false" onclick="switch(plugin[gyro].enabled);" /> |
默认皮肤开启陀螺仪功能
默认皮肤开启非常简单,因为默认的情况就已经开启了,我们在tour.xml的skin_settings元素中找到
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
gyro="true" |
默认皮肤在启动时则启用陀螺仪
默认皮肤在启动时默认是关闭陀螺仪的,你需要点击一下导航菜单中的陀螺仪按钮才可以使用陀螺仪效果。如果想一开始就启用陀螺仪,那么你可以在tour.xml的include那一行的后面添加
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<plugin name="skin_gyro" enabled="true"/> |
陀螺仪与限制视角的冲突
首先需要明确的是,如果你使用了限制视角的代码在陀螺仪启用时是无法生效的,也就是你不希望用户看到的地方在陀螺仪下是可以被浏览到的。因此我们可以在vtourskin.xml中找到下面一句
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
plugin[skin_gyro].available == true AND view.vlookatrange == 180 |
因为在小行星的skin_setup_littleplanetintro动作中有这么两行限制视角的代码。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 |
set(view.vlookatmin, 90); set(view.vlookatmax, 90); |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
view.vlookatrange == 180 |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
plugin[skin_gyro].available == true AND view.vlookatrange == 180 |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
plugin[skin_gyro].available == true |
在陀螺仪下限制视角
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<plugin name="gyro" ... camroll="false" onenable="set(view.limitview, range);" ... /> |
自定义皮肤下启用陀螺仪
直接插入以下代码即可实现无按钮控制的直接启用陀螺仪功能
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<plugin name="gyro" devices="html5" keep="true" url="%SWFPATH%/plugins/gyro2.js" enabled="true" camroll="true" friction="0.0" touch_mode="full" sensor_mode="1" softstart="0.5" autocalibration="true" onavailable="" onunavailable="" onenable="" ondisable="" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
onclick="switch(plugin[gyro].enabled);" visible="false" devices="html5" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<plugin name="gyro" devices="html5" keep="true" url="%SWFPATH%/plugins/gyro2.js" enabled="true" camroll="true" friction="0.0" touch_mode="full" sensor_mode="1" softstart="0.5" autocalibration="true" onavailable="calc(layer[gyrobutton].visible, view.vlookatrange == 180);" onunavailable="" onenable="" ondisable="" /> |