How do I detect Gear VR inputs in React VR scene?

Question

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>

Answer 1

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.