WebVR - lack of orientation and position data from PositionSensorVRDevice

I'm attempting to enable Oculus Rift DK2 orientation input for WebVR, using either Three.js' VRControls (

examples/js/controls/VRControls.js
) or directly from the PositionSensorVRDevice.

However, the values of orientation and position in the PositionSensorVRDevice are consistently either null (in Firefox) or VRPoint3D/4Ds with x,y,z values set to 0 (in Chrome), causing the camera orientation to remain static.

The various versions of Firefox and Chrome VR builds I have experimented with include:

While I am able to obtain a PositionSensorVRDevice successfully, it appears that it may not be the authentic one, as Chrome identifies it as:

  • deviceId: debug-0
  • deviceName: Moculus Rift
  • hardwareUnitId: debug-0

And Firefox reports it as:

  • deviceId: somedevid
  • deviceName: HMD Position Device
  • hardwareUnitId: unknownHMDInfo-0x1351d4000

I encountered the same issue while experimenting with the Leap Motion VR Quickstart demo and the Three.js WebGL Effects VR demo. Similarly, a previous demo I worked on a few months ago, which previously functioned properly - even though it doesn't utilize VRControls but interfaces directly with PositionSensorVRDevice.

To note, my Oculus Rift is properly connected and the Demo Scene from the Oculus Rift Config Util is operating as expected. The firmware version is updated to 2.12.

In the VRControls code, the crucial section is the update method where I've been examining the values of state.orientation and state.position:

this.update = function () {

    if ( vrInput === undefined ) return;

    var state = vrInput.getState();

    if ( state.orientation !== null ) {
        object.quaternion.copy( state.orientation );
    }

    if ( state.position !== null ) {
        object.position.copy( state.position );
    }

};

Any advice or suggestions would be greatly appreciated!

Answer №1

Whoops, it seems I was behind on the Oculus runtime updates! I was still using v0.4.1 - luckily upgrading to the 0.4.3 beta fixed everything. Now my VR experiences are running smoothly on the latest versions of FF and Chrome.

If anyone else is struggling with this issue, I found the solution thanks to Vlad's post on the web-vr mailing list.

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

I am seeking assistance with generating a printed list from the database

Struggling for two full days to successfully print a simple list from the database. Take a look at the current state of the code: function CategoriesTable() { const [isLoading, setLoading] = useState(true); let item_list = []; let print_list; useEffect(( ...

Issue when trying to use both the name and value attributes in an input field simultaneously

When the attribute "name" is omitted, the value specified in "value" displays correctly. However, when I include the required "name" attribute to work with [(ngModel)], the "value" attribute stops functioning. Without using the "name" attribute, an error ...

The issue of not being able to go fullscreen with a YouTube iframe nested within another iframe

I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...

How can you condense an if/else statement in JavaScript into one line?

When searching the DOM using $(current_form).find('input').data('option'), the result can either be undefined or a string of options like 'x|y|z'. To handle this, I typically split the string by calling split('|') to ...

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

Here is the JavaScript code I have written: $(document).ready(function(){ $('form').on('submit', function(){ var email = $("form input[type=text][name=emails]").val(); var todo = {email: email.val(), ...

When trying to run a jQuery function on click or load events, an error message stating that

When I have an .on(click) event triggering an ajax call, I want the same actions to occur when the page loads as well. My idea is to create a function that contains everything within the .on(click) event and trigger this function on page load. Although I ...

Issue with PHP form submission not functioning within a table when utilizing jQuery

I've created a function that retrieves user data. function returnChild(){ global $pdo; $stmt = $pdo->prepare("SELECT * FROM children INNER JOIN districts ON children.ch_district = districts.dst_id ...

Updating a Texture Image in Three.js

I'm currently working on a minecraft texture editor using three.js, with a similar interface to this. My goal is to implement basic click-and-paint functionality, but I'm facing challenges in achieving this. I have textures for each face of every ...

Exploring the Power of ReactJS Source Mapping

After adding the .env file to my react project, I noticed that when the project is uploaded to the server, the console source is displaying all components. Although I added the .env file and included the following code: GENERATE_SOURCEMAP = false; The i ...

Objects that are included into an array will end up with an undefined value

Currently, I am in the process of coding a command for my Discord bot that involves adding items to an array of objects stored within a JSON file. To achieve this functionality, I have implemented the following code snippet: let rawdata = fs.readFileSync(& ...

I'm looking for a way to track the progress of an ajax call. Specifically, I want to know how I

I am currently working on an AJAX call that executes a lengthy PHP script producing 20 different results. I aim to display the progress of each step within the script, such as 1/20 complete, 2/20 complete, 3/20 complete. Last updated on 29-12-2015 at 03:1 ...

Revamping the ejs template using an AJAX call

In my web app, users can search for recipes based on specific ingredients using the Edamam API. I implemented pagination to allow users to load more recipes when they click the "Load more" button, as Edamam only returns 20 recipes at a time. Here's ho ...

What is the best way to display pages with different states in ExpressJS?

Here is a code block that I have: var express = require('express'); var newsRouter = express.Router(); newsRouter.get('/:news_param', (req, res) => { let news_params = '/haberler/' + req.params.news_param; req.ne ...

How to implement a link_to tag in autocomplete feature with Rails

I'm having trouble adding a link to the show page in autocomplete results. Although my jQuery alert box is working fine, I can't seem to apply CSS to a div using jQuery. Here's the code snippet I've posted below: //application.js ...

Webpack Error: SyntaxError - an unexpected token found =>

After transferring my project to a new machine, I encountered an error when running webpack --watch: C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186 outputOption ...

Tips for updating the background color of a specific row

I have a piece of code that I am trying to modify with a specific condition. If {row.BB} is less than or equal to 100, I want to change the background color of the row with this value to red. Can someone help me achieve this? The code is linked to a data ...

Maintaining the "Date" value in React Native DatePickerIOS when returning from other pages

In my scenario, I am using the DatePickerIOS component. The example in the documentation initializes a new Date() and uses state to store and update the Date value. However, when navigating to another page and returning, the time changes and I find myself ...

Tips for integrating a logo into router view animations

How can I incorporate a logo into the white fade-in screen that appears when navigating between subpages using <router-view> within App.vue? Here is a simplified version of my App.vue code: <template> <div id="app"> <div ...