国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WebVR開發教程——交互事件（二）使用Gamepad API

pubdreamcc / 1505人閱讀

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


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

Gamepad API

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


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

Gamepad

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

獲取headset實例需要調用navigator.getVRDisplays()方法，同樣，獲取一個手柄的實例，則是調用navigator.getGamepads()方法，它返回一個gamepads數組。
一旦有手柄連接上，gamepads數組將產生有效的gamepad對象，否則，只能是null。

function getGamepad(id)
  const gamepads = navigator.getGamepads();
  for (let i = 0; i < gamepads.length; ++i) {
    let gamepad = gamepads[i];
    // 只有gamepad不為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手柄

上面實現的是根據手柄id獲取單個gamepad實例的方法，有些VR手柄如Vive Controller, Oculus Touch等是雙手柄，則需要獲取兩個gamepad實例。

接下來，我將針對gamepad實例的buttons, axes, pose三個重要屬性進行介紹，它們對應的是手柄按鈕、控制元件、傳感器三類組件，是實現gamepad交互事件的三大法寶。

Gamepad.buttons

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

GamepadButton顧名思義指的是gamepad上的按鈕實例，我們可以該實例獲取按鈕的狀態，比如是否被點擊。

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

由于gamepad的構造都不盡相同，如果想識別Gamepad.buttons中確認鍵或者返回鍵對象，可以通過GamepadButton.id的值來判斷。
下面是利用pressed實現tap事件的代碼，這里定義的tap事件，是指手指按下按鈕瞬間產生的觸發事件，不按壓或持續按壓過程不會產生tap。

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

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

Gamepad.axes

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

update() {
  const axes = this.gamepad.axes; // 獲取軸向數組
  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; 
}

上面通過計算兩幀之間搖桿在x軸和y軸的位移，控制畫廊的顯示位置，當搖桿向左推時，畫廊也向左移動。

GamepadPose

gamepad.pose屬性返回的GamepadPose對象，與頭顯的VRPose對象類似，GamepadPose訪問的是VR手柄的傳感器（加速計和陀螺儀），可以直接獲取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軸的線性速度

hasPosition與hasOrientation

只有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。

position與orientation

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

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

Acceleration與Velocity

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

小結

至此，WebVR事件開發基礎已經講完，接下來，我將對各主流VR類型進行針對性實現，根據交互的復雜性，將按照Cardboard→Gear VR→Daydream→Oculus Rift 由屌絲到高富帥的路線。

WebVR開發傳送門：

WebVR開發教程——交互事件（三）Cardboard與注視
WebVR開發教程——深度剖析 關于WebVR的開發調試方案以及原理機制
WebVR開發教程——標準入門 使用Three.js開發WebVR場景的入門教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89437.html

相關文章

  • WebVR開發教程——交互事件（一）頭顯與手柄

    摘要：交互事件交互根據自由度可分為和，顯然，所有的頭顯都應支持方向的追蹤。交互事件除了，現在大部分還搭配，用戶通過手持手柄可以與虛擬場景進行交互。 showImg(https://segmentfault.com/img/remote/1460000011813767?w=880&h=471); 前兩期主要介紹了開發WebVR應用的基本套路，不過開發出來的場景還只是可遠觀而不可褻玩，缺乏交互...

    harriszh 評論0 收藏0

  • WebVR開發教程——交互事件（三）Cardboard與注視

    摘要：開發傳送門開發教程交互事件一頭顯與手柄開發教程交互事件二使用開發教程深度剖析關于的開發調試方案以及原理機制開發教程標準入門使用開發場景的入門教程 showImg(https://segmentfault.com/img/remote/1460000011814846?w=1240&h=587); Cardboard可以說是手機VR頭顯的元老了，狹義上指的是Google推出的一個帶有雙凸...

    Allen 評論0 收藏0

  • SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

  • WebVR教程——Web Audio開發3D音效

    摘要：輸入結點主要負責加載解碼音頻源，比如獲取二進制音頻源的獲取音頻源的等處理結點主要對音頻數據進行計算處理，比如處理音頻振幅的等輸出結點則將音頻輸出至揚聲器或耳機，便是默認的輸出節點。 showImg(https://segmentfault.com/img/remote/1460000012753856); 在VR開發中，除了圖形視覺渲染，音頻處理是重要的一環，好的音頻處理可以欺騙用戶的...

    youkede 評論0 收藏0

  • 前端清單第 27 期：React Patent License 回復，Shopify WebVR 購

    摘要：新聞熱點國內國外，前端最新動態就開源許可證風波進行回復數周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發了社區的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復，Sho...

    jeffrey_up 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<