摘要：交互事件交互根據(jù)自由度可分為和，顯然，所有的頭顯都應支持方向的追蹤。交互事件除了，現(xiàn)在大部分還搭配，用戶通過手持手柄可以與虛擬場景進行交互。

前兩期主要介紹了開發(fā)WebVR應用的基本套路，不過開發(fā)出來的場景還只是“可遠觀而不可褻玩”，缺乏交互性，本期將帶大家走進VR交互世界，看看WebVR事件是如何開發(fā)的。

在可交互的VR世界里，用戶不再只是個觀察者，而是虛擬世界中一個生命，可以與虛擬世界進行通信。這種通信應該是雙向的：虛擬場景能感知你的存在（位置、方向），同時你的輸入又對物體產(chǎn)生作用。這里借鑒一個VR游戲場景：

一位MM想讓你給她選衣服，彈出一個菜單讓你選，你用touchpad滑動選擇給MM裝扮，你選了一條裙子并點擊手柄的按鈕確認；

MM問你看起來好不好看，你趕緊點頭；

MM很高興，讓你給她拍照，這時候你的手柄已變成了相機，對準她按下按鈕就可以拍照；

然而你二話不說蹲下去想欣賞MM的裙底，結(jié)果MM生氣了，游戲結(jié)束！

上述共采用了四種交互方式，根據(jù)輸入設備可分為headset頭顯交互和gamepad手柄交互，前者通過頭顯行為觸發(fā)事件（如2、4），后者通過手柄行為觸發(fā)事件（如1、3）。

這些交互行為都需要硬件支持（比如陀螺儀和加速計提供方向追蹤支持），我們需要通過JavaScript API來獲取headset或者gamepad的動態(tài)數(shù)據(jù)。

由于各VR產(chǎn)商的頭顯和手柄具有差異，因此對于用戶交互層面的支持度也參差不齊，以下展示各主流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(內(nèi)向追蹤)的SLAM技術支持

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

Headset交互根據(jù)自由度可分為3-DoF和6-DoF，顯然，所有的VR頭顯都應支持Orientation方向的3-DoF追蹤。

3-DoF依賴于設備的陀螺儀和加速計支持，根據(jù)頭部朝向來渲染場景視角，可以支持gaze注視和搖頭點頭的行為，一般以手機VR為主；

6-DoF則指的是支持空間追蹤，由于可以感知空間移動，可以支持Lean, dodge, duck的交互方式，如Oculus Rift和Htc Vive，以及Microsoft MR和Daydream Standalone等。

實現(xiàn)headset交互，首先是要能看得到虛擬世界，上期WebVR深度剖析中VR渲染是實現(xiàn)headset交互的第一步，我們需要使用WebVR API來獲取headset數(shù)據(jù)。

這里再復習一下：當用戶戴著headset扭頭或走動時，渲染器在每幀通過VRFrameData的視覺-投影矩陣，動態(tài)計算出每個物體的MVP復合矩陣，最后進行頂點和片元繪制。
令人興奮的是，three.js已經(jīng)將這個過程封裝到了相機和渲染器中，幫我們實現(xiàn)了第一步。

第二步，我們需要讓三維場景感知用戶（頭部）的存在，舉個例子，當一個球朝著玩家丟過來的時候，玩家機靈一躲，程序根據(jù)球體與玩家的位置判斷玩家是否躲閃成功。

這時候，我們還需要用到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軸的線性速度

通過這幾個屬性，我們可以讓相機具備物理數(shù)據(jù)，擁有實體感知能力，而不單單只是觀察者模式。

比如，下面實現(xiàn)用戶在使用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轉(zhuǎn)化成camera的Object3D屬性，因此我們可以直接調(diào)用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交互事件就是這樣，理解了這些，我們可以實現(xiàn)gaze事件監(jiān)聽，點頭搖頭事件監(jiān)聽等。

除了headset，現(xiàn)在大部分VR還搭配gamepad，用戶通過手持手柄可以與虛擬場景進行交互。

對于gamepad手柄而言，也有3-DoF和6-DoF的兩種類型：

3-DoF如daydream controller，只支持方向追蹤，于是google推薦采用laser激光筆進行交互。

6-DoF如Oculus touch，可以進行方向和位置追蹤，因此可以很好的模擬手臂的動作。

相比headset傳感器輸入產(chǎn)生的交互，gamepad還多了各種輸入元件，如按鈕、touchpad觸控板或thumbstick手搖桿等。

于是，根據(jù)手柄輸入硬件又可將gamepad事件分為三類：

A. 傳感器事件：由傳感器對手柄進行物理追蹤，如激光筆交互；
B. 按鈕事件：通過點擊按鈕產(chǎn)生的交互行為；
C. 控制單元事件：由thumbstick, touchpad輸入產(chǎn)生，如swipe滑動來翻頁等。

那么如何實現(xiàn)gamepad的交互事件呢？其實換個問題就是：如何訪問手柄的硬件信息，答案是使用Gamepad API，詳見WebVR開發(fā)教程——交互事件（二）使用Gamepad

WebVR開發(fā)傳送門：

WebVR開發(fā)教程——深度剖析 關于WebVR的開發(fā)調(diào)試方案以及原理機制
WebVR開發(fā)教程——標準入門 使用Three.js開發(fā)WebVR場景的入門教程