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

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

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

一位MM想讓你給她選衣服，彈出一個(gè)菜單讓你選，你用touchpad滑動(dòng)選擇給MM裝扮，你選了一條裙子并點(diǎn)擊手柄的按鈕確認(rèn)；

MM問你看起來好不好看，你趕緊點(diǎn)頭；

MM很高興，讓你給她拍照，這時(shí)候你的手柄已變成了相機(jī)，對(duì)準(zhǔn)她按下按鈕就可以拍照；

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

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

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

由于各VR產(chǎn)商的頭顯和手柄具有差異，因此對(duì)于用戶交互層面的支持度也參差不齊，以下展示各主流VR平臺(tái)在頭顯和手柄方面的在交互上的支持情況。

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自由度，支持方向追蹤，一般由陀螺儀、加速計(jì)等傳感器支持

Position自由度，支持位置追蹤，一般分為outside-in(外向追蹤)的紅外追蹤技術(shù)和inside-out(內(nèi)向追蹤)的SLAM技術(shù)支持

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

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

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

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

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

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

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

這時(shí)候，我們還需要用到VRFrameData一個(gè)重要屬性pose，通過frameData.pose返回一個(gè)VRPose對(duì)象，可獲取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軸的線性速度

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

比如，下面實(shí)現(xiàn)用戶在使用HTC Vive此類6-DoF的headset時(shí)，走動(dòng)超過范圍彈出警告的功能：

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; // 解構(gòu)用戶位置的x,y,z坐標(biāo)
  if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) {
    // 當(dāng)用戶離初始點(diǎn)超過20×20×20的空間時(shí)，彈出警告
    showWarningToast();  // 展示警告框
  }
}

同樣，three.js在VR模式下會(huì)自動(dòng)將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; // 解構(gòu)用戶位置坐標(biāo)
  if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) {
    showWarningToast();  // 用戶離初始點(diǎn)超過20×20×20的空間時(shí)，彈出警告框
  }
}

基本的headset交互事件就是這樣，理解了這些，我們可以實(shí)現(xiàn)gaze事件監(jiān)聽，點(diǎn)頭搖頭事件監(jiān)聽等。

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

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

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

6-DoF如Oculus touch，可以進(jìn)行方向和位置追蹤，因此可以很好的模擬手臂的動(dòng)作。

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

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

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

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

WebVR開發(fā)傳送門：

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