krpano Gyro 2插件实用指南

 🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《Krpano中文文档》

​ 

​

这个插件使用陀螺仪和移动或平板设备的加速度传感器来控制krpano的观看/观看方向。

注意-在许多较新的浏览器版本中，使用HTTPS是从浏览器获得陀螺支持的核心要求。

主题

• 语法
• API集成
• 插件状态属性
• 插件的事件
• 插件操作
• iFrame的笔记

​

传感器比较

​

陀螺仪测试

​

默认虚拟场景浏览

​

语法

<plugin name="gyro" keep="true"
        url="gyro2.js" 
        enabled="false"
        camroll="true"
        absolute="false"
        north="0"
        friction="0.0"
        touch_mode="full"
        sensor="1"
        sensor_mode="1"
        softstart="0.5"
        autocalibration="false"
        desktopsupport="false"
        onavailable=""
        onunavailable=""
        onenable=""
        ondisable=""
        ondenied=""
        />

动态或只读层/热点变量:

• isavailable
• isenabled

动作/功能:

• resetsensor (hlookat vlookat *)

Krpano API 集成

• 加载后，插件对象也将作为全局陀螺仪变量可用。

插件属性

属性名称 类型 默认值 enabled Boolean false 启用或禁用陀螺仪插件。 可以随时更改-例如，通过使用set()或switch()操作。

属性名称	类型	默认值
camroll	Boolean	true
根据设备卷筒转动/调平观看相机。

属性名称	类型	默认值
absolute	Boolean	false
使用绝对/真实世界导向陀螺仪跟踪。 默认情况下，pano-image-center (hlookat=0.0)将指向北方，但也可以设置自定义的北方位置/偏移量。 当禁用(默认)时，陀螺仪跟踪将相对于当前观看方向。 这个设备必须有一个磁传感器才能可靠地工作。iOS设备通常运行得很好，但在Android设备上，情况有所不同，这取决于设备。 注意-当使用绝对跟踪，所有panos应该设置/对齐到相同的北方。否则，北方的设置将需要为每个全景动态调整。

属性名称	类型	默认值
north	Number	0.0
定义北在全景图像中的位置(从-180到+180)。 默认值是0.0，它指的是全景图像的中心。 注意-这只在使用绝对陀螺仪跟踪时相关。 坐标系:

 

属性名称	类型	默认值
friction	String / Number	0.0
陀螺仪运动的摩擦/振动抑制。 值:0.0 - 0.99或“auto” 0.0 =无摩擦/阻尼，0.99 =非常强的阻尼 该值越高，阻尼越大，但因此也会使运动延迟更多。 auto - 动态使用基于当前变焦/视场和基于当前帧率的摩擦的自动变焦摩擦值-例如，放大时更多的抖动阻尼。

 

属性名称	类型	默认值
touch_mode	String	"full"
可用的模式: off - 没有触摸控制/平移。 horizontaloffset - 通过触摸拖动，只会改变水平偏移量。 full - 全触摸控制-平移水平和垂直。当移动设备时，垂直偏移量将缓慢地返回到实际设备方向。 disablegyro - 当用户触摸屏幕时，陀螺仪控制自动禁用，正常控制接管。为了重新获得陀螺仪的控制，陀螺仪需要再次启用。

 

属性名称	类型	默认值
sensor	int	1
定义哪个浏览器事件应该用于设备移动跟踪: 0 - deviceorientation事件 在这里，传感器融合将由浏览器自己完成。 不幸的是，这个事件的数据在许多Android设备和Android浏览器中都有bug或者是坏的(慢的、不准确的、错误的)。 1 - devicemotion事件(默认) 在这里，传感器融合将由krpano完成。 浏览器提供来自加速度和陀螺仪传感器的原始数据，krpano将它们结合起来以获得最终的设备旋转: 陀螺仪的数据非常快速和准确，但陀螺仪传感器只能测量相对旋转，因此随着时间的推移，它会偏离真实的物理方向。 为了补偿这种漂移，使用了加速度传感器。这个传感器测量地球的重力加速度，可以作为绝对参考。 但是加速度数据非常嘈杂，它只能用于检测“倾斜”旋转(向左，向右，向上或向下倾斜)-围绕设备本身的旋转不能通过加速度检测，为此需要陀螺仪数据。 因此，来自两个传感器的数据将被合并/融合。加速度数据将进行低通滤波，并用作慢速“稳定”和陀螺仪数据，以便在所有方向上快速准确地运动。 使用devicemotion事件(设置sensor=1)是默认的，通常不需要或没有好处使用deviceorientation事件，除非可能有一些极端的浏览器错误… Note - 在iOS 13.4 / Safari 13.1中，devicemotion事件被破坏。因此，在这些系统上，传感器的默认值被设置为0，以使用deviceorientation事件(它正在工作)。

属性名称	类型	默认值
sensor_mode	int	1
帧渲染和“传感器数据事件”以不同的时间间隔/速率发生(取决于系统和浏览器)，因此有必要评估和插值/外推传感器数据，以获得平滑、快速和响应性的移动。 通过此设置，可以为该过程选择不同的模式。 可用的模式: 0 = 直接使用最新可用的传感器数据。没有内插或外推。根据浏览器的传感器时间间隔，移动可以是不稳定的，也可以是平稳的。 1 = 平滑插值之间的最新可用的传感器数据。这将给一个非常平滑但稍微延迟的运动。 2 = 预测设备旋转，然后在传感器数据之间进行插值。 3 = 将最新可用的传感器数据外推到当前帧时间。这将提供快速响应和平滑的移动，但当推断/预测数据与实际移动不匹配时，可能会出现抖动。 4 = 预测设备旋转到当前帧时间。这将提供快速响应和平滑的移动，但当推断/预测数据与实际移动不匹配时，可能会出现抖动。 5 = 预测设备旋转，并从最新事件推断传感器数据到当前帧时间。

插件状态属性(只读) 

插件的事件 

 除了直接的插件事件，插件还会调度这些krpano事件:

<events gyro_onavailable=""
        gyro_onunavailable=""
        gyro_onenable=""
        gyro_ondisable=""
        gyro_ondenied=""
        />

插件操作

resetsensor(hlookat, vlookat*)

• 重置传感器跟踪以观察给定的视线(水平观察)方向。
• 当使用touch_mode=full时，还可以选择设置vlook(垂直观看)方向。      

✨ 结语        

        当在一个“跨源”iframe中使用陀螺仪(这意味着外部页面和内部iframe页面在不同的源/域上)时，陀螺仪的使用可能会被浏览器阻止。

        为了解决这个限制，可以在外部页面中“捕获”devicemotion事件，并通过postMessage API将其发送到内部iframe。
下面是外部(包含iframe的)网页的Javascript代码示例:

<script>
var pano_iframe_name = "enter_here_the_id_of_your_iframe_element";
window.addEventListener("devicemotion", function(e){ var iframe = document.getElementById(pano_iframe_name); if (iframe) iframe.contentWindow.postMessage({ type:"devicemotion", deviceMotionEvent:{ acceleration:{ x:e.acceleration.x, y:e.acceleration.y, z:e.acceleration.z }, accelerationIncludingGravity:{ x:e.accelerationIncludingGravity.x, y:e.accelerationIncludingGravity.y, z:e.accelerationIncludingGravity.z }, rotationRate:{ alpha:e.rotationRate.alpha, beta:e.rotationRate.beta, gamma:e.rotationRate.gamma }, interval:e.interval, timeStamp:e.timeStamp } }, "*"); });
</script>

​​​