摘要：返回的位置矩陣返回的方向矩陣返回軸每秒的角加速度返回軸每秒的角速度返回軸每秒的線性加速度返回軸的線性速度與只有的如和的只包含方向矩陣，因此為而為而的如和由于和兼具，因此和都為。

上期 WebVR開發(fā)教程——交互事件（一）頭顯與手柄 從頭顯和手柄兩個(gè)層面對(duì)VR交互事件進(jìn)行介紹，前者使用的是WebVR API，而后者則需用到Gamepad API，本期將對(duì)Gamepad API展開介紹。

Gamepad API是一個(gè)HTML5接口，讓開發(fā)者可以通過js訪問游戲手柄，使用Gamepad API的第一步是獲取gamepad實(shí)例。

一個(gè)典型的gamepad一般都會(huì)有button按鈕和axes control控制單元，而VR gamepad則是在前兩者的基礎(chǔ)上，加上對(duì)傳感器的支持。

屬性|說明
:------------:|:------------:
id|string類型，包含手柄的標(biāo)識(shí)信息。
connected|bool類型，反映手柄是否處于連接狀態(tài)
buttons|返回GampadButton對(duì)象數(shù)組，即手柄上的所有可用按鈕
axes|返回double類型數(shù)組，數(shù)組元素為手柄控制元件上各軸向數(shù)值
pose| 返回一個(gè)GamepadPose對(duì)象，包含手柄的方向和位置信息

獲取headset實(shí)例需要調(diào)用navigator.getVRDisplays()方法，同樣，獲取一個(gè)手柄的實(shí)例，則是調(diào)用navigator.getGamepads()方法，它返回一個(gè)gamepads數(shù)組。
一旦有手柄連接上，gamepads數(shù)組將產(chǎn)生有效的gamepad對(duì)象，否則，只能是null。

function getGamepad(id)
  const gamepads = navigator.getGamepads();
  for (let i = 0; i < gamepads.length; ++i) {
    let gamepad = gamepads[i];
    // 只有g(shù)amepad不為null才有效
    if (gamepad && gamepad.id === id)  return gamepad;
  }
}
// 或者寫成這樣： let getGamepad = id => navigator.getGamepads().filter( gamepad => gamepad && gamepad.id === id )[0];
this.gamepad = getGamepad("daydream vr controller"); // 獲取daydream controller手柄

上面實(shí)現(xiàn)的是根據(jù)手柄id獲取單個(gè)gamepad實(shí)例的方法，有些VR手柄如Vive Controller, Oculus Touch等是雙手柄，則需要獲取兩個(gè)gamepad實(shí)例。

接下來，我將針對(duì)gamepad實(shí)例的buttons, axes, pose三個(gè)重要屬性進(jìn)行介紹，它們對(duì)應(yīng)的是手柄按鈕、控制元件、傳感器三類組件，是實(shí)現(xiàn)gamepad交互事件的三大法寶。

Gamepad.buttons

Gamepad.buttons作為gamepad實(shí)例的一個(gè)重要屬性，代表手柄或遙控器上的所有可用按鈕，返回的是由一個(gè)或多個(gè)GamepadButton對(duì)象組成的數(shù)組。

GamepadButton顧名思義指的是gamepad上的按鈕實(shí)例，我們可以該實(shí)例獲取按鈕的狀態(tài)，比如是否被點(diǎn)擊。

屬性|類型|說明
:------------:|:------------:|:------------:
id|string類型|按鈕的id名
pressed|bool類型|按鈕是否處于按壓狀態(tài)。
touched|bool類型|按鈕是否處于觸摸狀態(tài)。
value|double類型|反映按鈕被按壓的程度

由于gamepad的構(gòu)造都不盡相同，如果想識(shí)別Gamepad.buttons中確認(rèn)鍵或者返回鍵對(duì)象，可以通過GamepadButton.id的值來判斷。
下面是利用pressed實(shí)現(xiàn)tap事件的代碼，這里定義的tap事件，是指手指按下按鈕瞬間產(chǎn)生的觸發(fā)事件，不按壓或持續(xù)按壓過程不會(huì)產(chǎn)生tap。

update() {
  const button = this.gamepad.buttons[0]; // 確認(rèn)鍵對(duì)象通常位于數(shù)組第一個(gè)
  if (!this._lastPressed && button.pressed) {
    // 處理tap事件
  }
  this._lastPressed = button.pressed;
}

用代碼的語(yǔ)言來說，就是只有滿足：1) 上一幀的button.pressed為false； 2) 當(dāng)前幀的button.pressed為true的才會(huì)觸發(fā)tap事件。
于是，我們需要定義一個(gè)_lastPressed來記錄上一幀button是否pressed。
使用gamepad.buttons可以輕松實(shí)現(xiàn)gamepad按鈕的點(diǎn)擊事件，接下來，將介紹另一個(gè)重要屬性gampad.axes，通過它我們可以判斷觸控板手勢(shì)、搖桿朝向等。

Gamepad.axes

Gamepad.axes返回的是gamepad控制元件的軸數(shù)據(jù)集，如手柄上的手搖桿Thumbstick、遙控器上的觸控板Touchpad都是具有雙軸向的元件。
當(dāng)用戶用手指推進(jìn)搖桿或者輕觸觸控板時(shí)，都可以用一個(gè)二維笛卡爾坐標(biāo)[x,y]來表示當(dāng)前搖桿或觸控板被觸發(fā)的方位，如下圖，返回一個(gè)-1.0~1.0的double數(shù)值組，一般將按水平、豎直的順序排序，如axes[0]表示x軸位置、axes[1]表示y軸位置。

update() {
  const axes = this.gamepad.axes; // 獲取軸向數(shù)組
  const x = axes[0], y = axes[1], 
  dx = x - this._lastAxes[0], dy = y - this._lastAxes[1];
  // 控制畫廊位移
  gallery.position.x += dx;
  gallery.position.y += dy;
  this._lastAxes = axes; 
}

上面通過計(jì)算兩幀之間搖桿在x軸和y軸的位移，控制畫廊的顯示位置，當(dāng)搖桿向左推時(shí)，畫廊也向左移動(dòng)。

gamepad.pose屬性返回的GamepadPose對(duì)象，與頭顯的VRPose對(duì)象類似，GamepadPose訪問的是VR手柄的傳感器（加速計(jì)和陀螺儀），可以直接獲取gamepad的方向、位置、速度和加速度等信息。

屬性|類型|說明
:------------:|:------------:|:------------:
hasPosition|bool|gamepad是否具有position屬性。
hasOrientation|bool|gamepad是否具有orientation屬性。
position|Float32Array|返回gamepad的位置矩陣
orientation|Float32Array|返回gamepad的方向矩陣
angularAcceleration|Float32Array|返回x, y, z軸每秒的角加速度
angularVelocity |Float32Array|返回x, y, z軸每秒的角速度
linearAcceleration|Float32Array|返回x, y, z軸每秒的線性加速度
linearVelocity |Float32Array|返回x, y, z軸的線性速度

只有3-DoF的gamepad如Gear VR和Daydream的Controller只包含orientation方向矩陣，因此hasOrientation為true而hasPosition為false；
而6-DoF的gamepad如Oculus touch和HTC Vive Controller由于orientation和position兼具，因此hasOrientation和hasPosition都為true。

GamepadPose最重要的屬性，通過這兩個(gè)屬性可以將現(xiàn)實(shí)的手柄映射到VR三維世界中，比如當(dāng)用戶使用手柄玩射擊游戲時(shí)，就需要獲取每一幀gamepad的oritentation，并賦值給3d場(chǎng)景里的槍支模型。

update() {
    const { orientation, position } = this.gamepad.pose;
    controller.quaternion.fromArray( orientation ); // 將方向矩陣賦值給遙控器模型
    controller.position.fromArray( position ); // 將位置矩陣賦值給遙控器模型
}

GamepadPose還提供了一系列運(yùn)動(dòng)屬性：角加速度、角速度、線性速度、線性加速度，我們可以根據(jù)這些屬性進(jìn)行更豐富的物理行為，比如使用加速度×質(zhì)量來計(jì)算物體受力情況，適用于諸如砍殺、擊球等復(fù)雜運(yùn)動(dòng)形式，這里就不展開細(xì)說了。

至此，WebVR事件開發(fā)基礎(chǔ)已經(jīng)講完，接下來，我將對(duì)各主流VR類型進(jìn)行針對(duì)性實(shí)現(xiàn)，根據(jù)交互的復(fù)雜性，將按照Cardboard→Gear VR→Daydream→Oculus Rift 由屌絲到高富帥的路線。

WebVR開發(fā)傳送門：

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