前兩期主要介紹了開發(fā)WebVR應用的基本套路，不過開發(fā)出來的場景還只是“可遠觀而不可褻玩”，缺乏交互性，本期將帶大家走進VR交互世界，看看WebVR事件是如何開發(fā)的。
VR交互有哪些？
在可交互的VR世界里，用戶不再只是個觀察者，而是虛擬世界中一個生命，可以與虛擬世界進行通信。這種通信應該是雙向的：虛擬場景能感知你的存在（位置、方向），同時你的輸入又對物體產(chǎn)生作用。這里借鑒一個VR游戲場景：
- 一位MM想讓你給她選衣服，彈出一個菜單讓你選，你用touchpad滑動選擇給MM裝扮，你選了一條裙子并點擊手柄的按鈕確認；
- MM問你看起來好不好看，你趕緊點頭；
- MM很高興，讓你給她拍照，這時候你的手柄已變成了相機，對準她按下按鈕就可以拍照；
-
然而你二話不說蹲下去想欣賞MM的裙底，結(jié)果MM生氣了，游戲結(jié)束！
VR女友——點頭與搖頭
上述共采用了四種交互方式，根據(jù)輸入設(shè)備可分為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(外向追蹤)的紅外追蹤技術(shù)和inside-out(內(nèi)向追蹤)的SLAM技術(shù)支持
通常在VR體系里，3-DoF指的是VR硬件支持Orientation，6-DoF指的是支持Orientation + Position。
Headset交互事件
Headset交互根據(jù)自由度可分為3-DoF和6-DoF，顯然，所有的VR頭顯都應支持Orientation方向的3-DoF追蹤。
- 3-DoF依賴于設(shè)備的陀螺儀和加速計支持，根據(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; // 解構(gòu)用戶位置的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; // 解構(gòu)用戶位置坐標
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)聽等。
GamePad交互事件
除了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ā)教程——深度剖析 關(guān)于WebVR的開發(fā)調(diào)試方案以及原理機制
WebVR開發(fā)教程——標準入門 使用Three.js開發(fā)WebVR場景的入門教程
