View on GitHub

Yinjie - GitHub.io

Welcome to the Yinjie's notes

VR基础及其在页面级应用(1) — 方向

“文字说明不想看~ !?”,直接“点击这里”看例子

技术背景

今年国际技术的主要着力点在于两个方向:

  1. VR (AR/MR)
  2. 人工智能

VR 这种在十几年前只能出现在科幻电影里的技术,在如今,随着各方面技术成熟而全面暴发。

2016年被称为 VR元年,不管是硬件,还是软件,都有非常给力的作品正式出现在人们的生活中。

IT技术上,刚刚过去的一年一度电商盛事双11,让各个公司技术团队相互较着一股暗劲。 前端方向上,都不约而同的将类 vr 技术运用到了各个大型促销活动的页面中。

这场整个中国电商对决的大事件,经过几年的演化,已经不仅仅在促销、推广、渠道等几个硬实力上一决高下, 所映射出的资金、技术、影响力、文化等等方面也体现出各个电商的软实力。

淘宝的”ZAO”;京东的品牌街;1号店的品类空间都做得非常给力。(个人认为1号店的最牛,3D场景、3D视野展示)。相信以后这类技术会在更多的场景中有所应用。

以下就简要说一下这类技术的基本核心 ——— 方向

陀螺仪的作用

设备的方向感知是依靠陀螺仪进行的。这个主题的文章在网上数不胜数,有兴趣可以自己去搜一下陀螺仪的原理。

以常用的三轴陀螺仪为例,它的作用就是在我们生活的这个三维空间中,总以一种稳定的位置形态存在,不会随着外界的3d旋转而改变。 通过这种能力,以稳定的陀螺仪作基准角度参照,我们就可以知道设备在各个方面上的旋转角度。

alt

当然,以上这些对表现层的开发者来说是透明的,我们只关心它的最终产出 —— 三个维度的旋转角度

deviceorientation 事件

HTML5 接口中提供了一个获取设备旋转角度的接口:deviceorientation


    window.addEventListener('deviceorientation', function (evt) {
        evt.alpha                   // alpha 轴角度
        evt.beta                    // beta 轴角度
        evt.gamma                   // gamma 轴角度
    }

alpha

此角度是指设备沿着垂直屏幕的轴的旋转角度,范围是 0~360。

alt

这个最容易理解,就是手机屏幕旋转的角度。

beta

此角度是设备沿着屏幕左至右方向的轴的旋转角度,范围是 -180~180

alt

这个角度就是正握手机,前后倾斜的角度(相对水平面)。因为分“向前倾斜”和“向后倾斜”,所以在范围上也就有了正负值的区别。

gamma

此角度是设备沿着屏幕下至上方向的轴的角度,范围是 -90~90

alt

这个角度是正握手机,左右倾斜的角度(相对水平面)。

敏感的人在此处应该会有一个疑问,为什么范围 只有 180 度,这样不就在实用会造成空间维度缺失吗? 笔者接着试验中也发现,gamma 角度过了边界值,就会发生正负跳变,导致旋转混乱,不明白为什么这样设计。 找了不少材料,大致明白了其中原因。有兴趣的人可以自行百度 “万向锁现象” 和 “全角度解算”。 这是一个数学、空间几何、计算机科学的一个小难点。

absolute*

有些设备/浏览器还是提供一个 absolute ,这是相对地球坐标系统还是相对设置坐标系统的一个标识,根据设备采用的不同陀螺仪会有不同。实际应用中,影响还是很大的。 笔者的例子中,那个方向骰子,“东南西北”方向有可能不准,就是受这个参数所致。

compassHeading*

在有些浏览器中,还会有 compassHeading/webkitCompassHeading 这样一个参数,这就是罗盘方向值,通过这个可以将 alpha 角度校准到地球坐标。

最终上干货

上面整了一堆“没用的”,直接看例子吧~~~,页面中有原码,有兴趣也可以自行研究。

这类技术有非常强的通用性,网上的相关文档都非常全,核心代码实现也不是很多,重点在于理解,更在于实际的应用场景。

(下一篇:VR基础&页面级应用(2) — 速度)


参照:
[1] https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
[1] https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained
[2] https://en.wikipedia.org/wiki/Gyroscope