4

I am trying to create a web app using React VR and run it using Samsung Gear VR.

I could not see the default white dot (VR pointer) while in VR mode in my scene. Consequently methods such as "onInput" and "onClick" are not working. The same methods work quite fine if I view the same scene outside VR mode - even using the browser provided in Gear VR.

Am I missing something? How do I access those methods while in VR mode in Gear VR?

Example code that works fine in normal web browser (including the one in Gear VR), but not when I am in VR.

<Text
    style={{
        // backgroundColor: '#777879',
        fontSize: 0.2,
        transform: [{translate: [0, 0, -5]}],
        color: this.state.textColor
    }}
    onEnter={() => this.setState({textColor: 'gold'})}
    onExit={() => this.setState({textColor: 'white'})}>
    This text will turn gold when you look at it.
</Text>
Debojyoti Ghosh
  • 375
  • 1
  • 2
  • 17

1 Answers1

6

You need to add a raycaster:

To do so, you need to do the following:

In your project, go to <project root>/vr/client.js. Just before the init method, add a SimpleRaycaster constant.

const SimpleRaycaster = {
    getType: () => "simple",
    getRayOrigin: () => [0, 0, 0],
    getRayDirection: () => [0, 0, -1],
    drawsCursor: () => true
};

function init(bundle, parent, options) {

//...

Then, in the init method, set cursorVisibility: visible and add the raycaster to the array of raycasters:

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

window.ReactVR = {init};

That's it. Now you should have a white dot in the middle of your view.

Hristo Georgiev
  • 2,499
  • 1
  • 16
  • 23
  • Thanks for your answer. This seems to be working fine in Chrome Canary. Hover effects are now working. :) I am yet to try this with GearVR. I'll need to check if click operations are working as well. Once I do so, I shall update here and mark your answer as accepted. Thanks again. – Debojyoti Ghosh Jul 11 '17 at 10:38
  • @gdebojyoti, this is the simplest raycaster (cursor) since it's gaze-based so it will work with GearVR without any problems. However, it won't work with the controller. . If you want to use the mouse or a controller as a raycaster, you need to use a custom raycaster. Currently I'm working on an universal raycaster which works on all devices and all WebVR-enabled browsers. I will update you when I'm ready to share it. – Hristo Georgiev Jul 11 '17 at 11:59