Is it possible to connect to the Oculus Go controller using the GamePad API within the Oculus Browser

Exploring my three.js apps on the new Oculus Go has led me to question whether I can interact with the controller solely through the GamePad API supported by major browsers. Although Oculus documentation suggests using OVRManager in Unity or Unreal Blueprints, I prefer avoiding additional learning curves and bloating my apps unnecessarily.

As a VR novice, I am inclined to pursue a simpler approach by utilizing the Gamepad API, despite facing challenges such as breaking the app when transitioning into VR mode. The following snippet outlines my initial attempt:

var gamePadState = {
  lastButtons: {},
  lastAxes: {}
};

function onGamePad(){

    Array.prototype.forEach.call( navigator.getGamepads(), function (activePad, padIndex){
      if ( activePad.connected ) {
        if (activePad.id.includes("Oculus Go")) {
          // Handling buttons and axes for the Gear VR touch panel
          activePad.buttons.forEach( function ( gamepadButton, buttonIndex ){
            if ( buttonIndex === 0 && gamepadButton.pressed && !lastButtons[buttonIndex]){
              // Managing tap action
              dollyCam.translateZ( -0.01 );
            }
            gamePadState.lastButtons[buttonIndex] = gamepadButton.pressed;
          });

          activePad.axes.forEach( function (axisValue, axisIndex ) {
            if (axisIndex === 0 && axisValue < 0 && lastAxes[axisIndex] >= 0 ){
              // Swipe right
            } else if (axisIndex === 0 && axisValue > 0 && lastAxes[axisIndex] <= 0) {
              // Swipe left
            } else if (axisIndex === 1 && axisValue < 0 && lastAxes[axisIndex] >= 0) {
              // Swipe up
            } else if (axisIndex === 1 && axisValue > 0 && lastAxes[axisIndex] <= 0) {
              // Swipe down
            }
            gamePadState.lastAxes[axisIndex] = axisValue;
          });
        } else {
          // Supporting connected Bluetooth gamepad for VR experience
        }
      }
    });

}

In a related inquiry raised on Stack Overflow, I was recommended to incorporate Unity build in my app for desired outcomes. While I'm open to it, I'd prefer not to delve into that realm unless absolutely necessary.

My goal is to establish support for various controllers using logics similar to the one above. However, my current focus lies on getting the Oculus Go controller to work effectively.

Hence, my query revolves around the possibility of interfacing with the Oculus Go controller through the Gamepad API, particularly concerning device properties like buttons, axes, orientation, and associated gamepad events.

Your insights are greatly appreciated.

Answer №1

Yes, you have the option to utilize the Gamepad API directly instead of relying on Unity. A while back, I created my own Oculus Go controller script which surprisingly required much less code than anticipated. If you're interested, you can access my code on GitHub here. Feel free to check it out!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using NextJS, the dynamically generated HTML elements do not get affected by CSS repaint

Recently, I encountered an issue while working on a Next.js project involving the addition of an external script that uses vanilla JavaScript to dynamically create nodes. Despite importing global CSS at the top of my _app.js file, I noticed that the styles ...

Obtaining a return value from a function in Angular

After just starting to work with Angular, I am attempting to extract a value from a button displayed in the HTML using a function. `<button class="btn" id="btn-gold" (click)="value(9)" name="mybutton" value="9">` 9 I have also inclu ...

Employ the 'this' attribute within _.map

I am facing an issue where I need to call a setState function within a _.map loop in React. However, the loop is losing the reference to 'this' and therefore I cannot use setState as this becomes undefined. cargaDinamica(){ _.map(this.stat ...

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

Branch IO Integration with React Web Application: Resolving the 'Branch' Undefined Issue

I've been attempting to incorporate branch.io into my React app, but I keep encountering errors when trying to use it. Specifically, I'm getting the following error messages: - TypeError: Cannot read property 'init' of undefined - &apos ...

Make sure to properly check the size of the image before uploading it in express js

Below is the code I have written to verify if an image's size and width meet the specified criteria: im.identify(req.files.image,function (err,features) { //console.log(features); if(features.width<1000 ...

Using Bootstrap Collapse with EJS Iteration

I am having trouble with this specific section of my ejs file where the collapse feature is not functioning correctly. Can someone please assist me? <% for(var i=0;i<data.length;i++){%> <div id="content"> <p><%=data[i].w ...

Error TS2322: The function expecting a type of 'FormEventHandler<HTMLFormElement>' cannot be assigned the type '(data: TicketFullDTO) => Promise<void>'

I am currently working on creating an edit form to modify data from a database based on its ID. Here is my approach: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/TextField" ...

Converting HTML Forms to Arrays

Hey there, I've been working on a pizza ordering program lately. My approach involved creating a form with different inputs and then attempting to collect that information into an array. Unfortunately, things didn't quite work out as expected, an ...

Tips for implementing multiple selectors in YUI

Is there a way to use multiple selectors in YUI (YUI 2) similar to jQuery? $('h1, h2, el1, el2, .content, .title').css('color', 'red'); How can I achieve the same in YUI without having to individually add classes using YAHOO ...

Using Angular and Jasmine: techniques for simulating a service that provides a promise

In my AngularJS application, I have a controller called MenuCtrl that utilizes a service provided by "$mdSidenav" from Angular Material. This service is created using a factory method. angular.module('leopDirective', []) .controller('Me ...

Script for collapsing or expanding is non-functional

Although I am a beginner in Javascript coding, I am eager to learn more about it. I stumbled upon some tutorials on creating collapse/expand <div> blocks. After testing the code on jsfiddle, I found that it works fine there. You can find the code he ...

Tips for updating a portion of your code using new variables in JavaScript

I'm currently working on implementing a commenting feature for my website. The goal is to display new comments above the existing comment section when users submit their feedback. However, I'm facing challenges in dynamically updating the HTML wi ...

Transmit the value of radio button data to PHP using Ajax

I'm facing an issue in sending radio button data to PHP using JavaScript. For example, when the radio button "Mother" is selected, the value "Mother" should be sent via AJAX. However, I'm struggling to achieve this functionality and haven't ...

The login functionality on Passport.js is not syncing with Angular updates

I'm currently in the process of developing my first full-stack MEAN application, but I've encountered some issues due to following an outdated tutorial with newer npm packages. The particular problem arises when handling the login functionality w ...

Unleashing the Power of RxJS with OR Conditions

I am working with two Observables. For instance, I am waiting for either an HTTP POST call or a WebSocket call to return so that I can proceed. Once either call returns, I need to verify the information until a certain condition is met. In the following e ...

Searching in binary for the number closest to the target float value

Seeking assistance with a float array conundrum! I am trying to identify the closest float value to a target number within the array. My attempt involved utilizing a basic binary search algorithm in JavaScript, but I've hit a roadblock. function bina ...

Integrate predictive text suggestions in JavaServer Pages for efficient form filling

After some research, I have managed to solve the issue I was facing. On my jsp page, I have three text boxes. When I enter data into the first text box, it triggers a call to get.jsp to fetch data from the database and populate the second text box. However ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Unable to convert the String prop that was passed from the parent component to a JSON object using JSON.parse() in a React child component

Issue Overview: The SLTree React component retrieves a JSON object using Ajax, converts it to a string, and then passes it as a property to two other components - Editor and TNode. While the Editor component (which contains CodeMirror) functions correct ...