React-360: Cursor not visible when moving the mouse however it's set as visible

[HeinPauwelyn]

Description

I'm making a project with React VR. Now will set a cursor visible in the middle of the screen for click on buttons on an easy way when waring your headset.

For this I'm using this code in vr/index.html:

<script>
    ReactVR.init(
        '../index.vr.bundle?platform=vr&dev=true',
        document.body,
        { cursorVisibility: 'visible' }
    );
</script>

This is the same code like in the documentation over here. I've also added this code in the vr/client.js file:

const vr = new VRInstance(bundle, 'antigif', parent, {
    cusorVisibility: 'visible',
    ...options,
});

However this code doesn't work at all. The cursor is a few seconds visible but will hide when I move with the mouse. This is not what I need!

Is this a bug in React VR or

Expected behavior

The cursor is always visible also when you're moving the mouse.

Actual behavior

The cursor will be hidden when I move with the mouse.

Reproduction

I browse to the website on http://192.168.0.152:8081/vr. If I do nothing the cursor is visible. But if I want to click on the View in VR button, the cursor will be hide.

Solution

See above.

Additional Information

• React VR version: 0.2.0
• Operating System: all
• Graphics Card: all
• Browser: all
• VR Device: all

[andrewimm]

I'll try to understand your expected behavior further:
Are you hoping that the white disc cursor drawn by React VR will follow your mouse? That behavior isn't intended, since your mouse already has a cursor.

As noted in the same documentation you link to, React VR is designed to support multiple, pluggable cursor implementations. Each implementation determines whether it draws a cursor or not, and the default Mouse RayCaster does not draw a cursor, so you should not expect the cursor visibility flag to work. I will try to make this clearer in documentation.

As for adding a cursor inside the headset, we mention in that documentation that by default we don't enable a cursor implementation for in-VR mode, because there are so many potential things to support (gaze, various 3dof controllers, various 6dof controllers, etc). We can't prescribe one solution for all users, and instead encourage you to pick the inputs that are correct for your application. If you look at the documentation, as well as our sample code, you'll see how to implement a RayCaster that meets your needs: you just need to implement the functions that return the origin and direction of the ray the cursor is cast from.

However, it is a bug that the cursor is initially drawn when no cursor data has been received yet. I will fix that bit.

[HeinPauwelyn]

Well, I'll make gaze buttons in my application. For using that it's easier to add a cursor on the middle of the screen.

The blue dot I've added with paint, is the cursor and must stand on the middle of the screen. The red dot is the button. By gazing to the button, a click event must be triggered. For got a better VR experience with the Oculus Rift, the blue cursor is needed.

Steps to make your cursor visible

I could add the cursor by using this steps. The red arrow is my mouse cursor.

1. Load the website by browsing to http;//localhost:8081/vr

   

2. Place the mouse on the View in VR button but do not click on it! By moving the mouse on the page, the cursor will be hidden.

   

3. Reload the page by using the F5 key but do not replace your mouse! The cursus will be visible again.

   

4. Click on the View in VR button.

   

5. The cursor stays visible until your mouse cursor hovers over the VR scene.

   

Note

There is a bug when opening the website with Chromium and Firefox Nightly in the Oculus Rift. For more information about that see _Sorry, firefox.exe/chrome.exe is taking a while to load_ on Stack Overflow

[HeinPauwelyn]

Found the problem. If I do my headset on, the cursor will be visible!

[HeinPauwelyn]

@andrewimm the cursor will stile hide when using the Galaxy Gear VR HMD.

[infoxiao]

@andrewimm I struggled with this quite a bit then finally understood what you meant by raycaster. I think the current documentation is indeed super confusing. Adding https://www.npmjs.com/package/simple-raycaster to the Cursor Visibility section will definitely help.

[andrewimm]

@infoxiao thanks for the input. We're trying to balance the technical aspects of API documentation with a more informal guide. I'm actually in the middle of a blog post right now that explains these things in a longer, but more descriptive form that walks through each of the pieces.

[infoxiao]

@andrewimm yeah I understand. It's just that particular piece about visibility is quite counter-intuitive. In my not-too-technical mind, setting it to "visible" should mean that I should be able to see it without any additional work (by setting the raycaster or whatever that is...). Look forward to the blog post and keep me posted!

[andrewimm]

I'll try to make the documentation clearer that the cursor visibility only applies IF the current raycaster draws a cursor.