View React VR on Gear VR

[ngocnguyen09910060]

Hi everybody,

I am building a project with React VR: a panorama with some infomation buttons. When user click button, a tooltip is shown. It runs very well on web browser of PC.

But when i using Gear VR + Samsung Galaxy S8 to view it, although i have controller device of Gear VR, i don't have any cursor to click.

How can i implement feature: user look at any button 2 seconds, React VR will show tooltip of this button ?

Thanks.

[andrewimm]

Relevant links: https://github.com/facebook/react-vr/issues/86 https://www.npmjs.com/package/react-vr-gaze-button

[ngocnguyen09910060]

Hi @andrewimm , Thank you so much. But i have another issue. How can i detect user are using browser on PC or browser on mobile or "View in VR" (when view by Gear VR) ?

[andrewimm]

In React, you can tell if the app is in VR by calling require('VrHeadModel').inVR()

As for determining whether the browser is on PC or mobile, that's not specific to React VR, and there are many different ways to determine that depending on what exactly you're looking for.

[ngocnguyen09910060]

Hi @andrewimm , I have applied gaze button and cursorVisibility: "auto". It work fine on all evironment. But i only want it work on "View in VR" mode. How can i do it ?

[andrewimm]

Sorry, I don't understand. Do you only want to enable the cursor in VR mode, or the button?

[ngocnguyen09910060]

I only want to enable cursor in VR mode.

[andrewimm]

Unfortunately that's pretty application-specific. The raycaster determines when to draw the cursor with its drawsCursor() method, which returns a boolean. The raycaster you're using probably just returns a single true value. To control this in and out of VR, you need to toggle the value; for instance, you can listen to 'vrdisplaypresentchange' events, which fire when you enter and exit VR.

Here's how I'd implement it as part of a larger raycaster:

class MyRaycaster {
  constructor() {
    this._active = false;
    window.addEventListener('vrdisplaypresentchange', e => {
      this._active = e.display.isPresenting;
    });
  }

  // other implementation details
  // ...
  // ...

  drawsCursor() {
    return this._active;
  }
}

Hope that makes sense.

[ngocnguyen09910060]

Hi @andrewimm , I was implemented your solution:

class MyRaycaster { constructor() { this._active = false; window.addEventListener('vrdisplaypresentchange', e => { this._active = e.display.isPresenting; }); }

getType() { return "simple"; }

getRayOrigin() { return [0, 0, 0]; }

getRayDirection() { return [0, 0, -1]; }

drawsCursor() { return this._active; } }

function init(bundle, parent, options) { const vr = new VRInstance(bundle, 'Test02', parent, { raycasters: [ new MyRaycaster // Add SimpleRaycaster to the options ], cursorVisibility: "auto", // Add cursorVisibility ...options, }); vr.render = function() { // Any custom behavior you want to perform on each frame goes here }; // Begin the animation loop vr.start(); return vr; }

But it still working on web browser. My expected result is: It isn't work on web browser, only work on "View in VR" mode.