WebVR开发教程——交互事件（一）头显与手柄

前两期主要介绍了开发WebVR应用的基本套路，不过开发出来的场景还只是“可远观而不可亵玩”，缺乏交互性，本期将带大家走进VR交互世界，看看WebVR事件是如何开发的。

VR交互有哪些？

在可交互的VR世界里，用户不再只是个观察者，而是虚拟世界中一个生命，可以与虚拟世界进行通信。这种通信应该是双向的：虚拟场景能感知你的存在（位置、方向），同时你的输入又对物体产生作用。这里借鉴一个VR游戏场景：

1. 一位MM想让你给她选衣服，弹出一个菜单让你选，你用touchpad滑动选择给MM装扮，你选了一条裙子并点击手柄的按钮确认；
2. MM问你看起来好不好看，你赶紧点头；
3. MM很高兴，让你给她拍照，这时候你的手柄已变成了相机，对准她按下按钮就可以拍照；
4. 然而你二话不说蹲下去想欣赏MM的裙底，结果MM生气了，游戏结束！
   

上述共采用了四种交互方式，根据输入设备可分为headset头显交互和gamepad手柄交互，前者通过头显行为触发事件（如2、4），后者通过手柄行为触发事件（如1、3）。

这些交互行为都需要硬件支持（比如陀螺仪和加速计提供方向追踪支持），我们需要通过JavaScript API来获取headset或者gamepad的动态数据。

由于各VR产商的头显和手柄具有差异，因此对于用户交互层面的支持度也参差不齐，以下展示各主流VR平台在头显和手柄方面的在交互上的支持情况。

VR类型 |headset|gamepad
:------------:|:------------:|:------------:
Cardboard|3-DoF|无
Daydream Smartphone VR|3-DoF|3-DoF
Daydream Standalone VR|6-DoF|?-DoF
Gear VR|3-DoF|3-DoF
Oculus Rift|6-DoF|6-DoF
HTC Vive|6-DoF|6-DoF
Microsoft MR|6-DoF|6-DoF

表中的DoF(degree of freedom)就是我们常说的自由度，主要为Orientation自由度和Position自由度两种。

• Orientation自由度，支持方向追踪，一般由陀螺仪、加速计等传感器支持
• Position自由度，支持位置追踪，一般分为outside-in(外向追踪)的红外追踪技术和inside-out(内向追踪)的SLAM技术支持

通常在VR体系里，3-DoF指的是VR硬件支持Orientation，6-DoF指的是支持Orientation + Position。

---

Headset交互事件

Headset交互根据自由度可分为3-DoF和6-DoF，显然，所有的VR头显都应支持Orientation方向的3-DoF追踪。

• 3-DoF依赖于设备的陀螺仪和加速计支持，根据头部朝向来渲染场景视角，可以支持gaze注视和摇头点头的行为，一般以手机VR为主；
• 6-DoF则指的是支持空间追踪，由于可以感知空间移动，可以支持Lean, dodge, duck的交互方式，如Oculus Rift和Htc Vive，以及Microsoft MR和Daydream Standalone等。

实现headset交互，首先是要能看得到虚拟世界，上期WebVR深度剖析中VR渲染是实现headset交互的第一步，我们需要使用WebVR API来获取headset数据。

这里再复习一下：当用户戴着headset扭头或走动时，渲染器在每帧通过VRFrameData的视觉-投影矩阵，动态计算出每个物体的MVP复合矩阵，最后进行顶点和片元绘制。
令人兴奋的是，three.js已经将这个过程封装到了相机和渲染器中，帮我们实现了第一步。

第二步，我们需要让三维场景感知用户（头部）的存在，举个例子，当一个球朝着玩家丢过来的时候，玩家机灵一躲，程序根据球体与玩家的位置判断玩家是否躲闪成功。

这时候，我们还需要用到VRFrameData一个重要属性pose，通过frameData.pose返回一个VRPose对象，可获取headset的传感器信息，比如位置、方向、速度和加速度等。

VRPose

属性|类型|说明
:------------:|:------------:|:------------:
position|Float32Array|返回headset的位置矩阵
orientation|Float32Array|返回headset的方向矩阵
angularAcceleration|Float32Array|返回x, y, z轴每秒的角加速度
angularVelocity |Float32Array|返回x, y, z轴每秒的角速度
linearAcceleration|Float32Array|返回x, y, z轴每秒的线性加速度
linearVelocity |Float32Array|返回x, y, z轴的线性速度

通过这几个属性，我们可以让相机具备物理数据，拥有实体感知能力，而不单单只是观察者模式。

比如，下面实现用户在使用HTC Vive此类6-DoF的headset时，走动超过范围弹出警告的功能：

update() {
  const { vrdisplay, frameData, userModel } = this; 
  frameData = vrdisplay.getFrameData(frameData);
  const vrpose = frameData.pose;
  userModel.position.fromArray(vrpose.position); // 将VRPose位置矩阵赋予用户角色
  const { x, y, z } = userModel.position; // 解构用户位置的x,y,z坐标
  if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) {
    // 当用户离初始点超过20×20×20的空间时，弹出警告
    showWarningToast();  // 展示警告框
  }
}

同样，three.js在VR模式下会自动将VRPose的position和orientation转化成camera的Object3D属性，因此我们可以直接调用camera.position和camera.quaternation/rotation获取用户的位置和朝向，代码简化如下：

update() {
  const { camera, userModel } = this;
  userModel.position.copy(camera.position);
  const { x, y, z } = userModel.position; // 解构用户位置坐标
  if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) {
    showWarningToast();  // 用户离初始点超过20×20×20的空间时，弹出警告框
  }
}

基本的headset交互事件就是这样，理解了这些，我们可以实现gaze事件监听，点头摇头事件监听等。

---

GamePad交互事件

除了headset，现在大部分VR还搭配gamepad，用户通过手持手柄可以与虚拟场景进行交互。

对于gamepad手柄而言，也有3-DoF和6-DoF的两种类型：

• 3-DoF如daydream controller，只支持方向追踪，于是google推荐采用laser激光笔进行交互。
• 6-DoF如Oculus touch，可以进行方向和位置追踪，因此可以很好的模拟手臂的动作。

相比headset传感器输入产生的交互，gamepad还多了各种输入元件，如按钮、touchpad触控板或thumbstick手摇杆等。

于是，根据手柄输入硬件又可将gamepad事件分为三类：

A. 传感器事件：由传感器对手柄进行物理追踪，如激光笔交互；
B. 按钮事件：通过点击按钮产生的交互行为；
C. 控制单元事件：由thumbstick, touchpad输入产生，如swipe滑动来翻页等。

那么如何实现gamepad的交互事件呢？其实换个问题就是：如何访问手柄的硬件信息，答案是使用Gamepad API，详见WebVR开发教程——交互事件（二）使用Gamepad

---

WebVR开发传送门：

WebVR开发教程——深度剖析 关于WebVR的开发调试方案以及原理机制
WebVR开发教程——标准入门 使用Three.js开发WebVR场景的入门教程