React-360: Display Oculus Rift Controller and Laser in VR mode

[jaider]

Description

Feature Request. I wish to be able to activate Oculus Rift Controller in VR mode... It will be great if we can make the Oculus Rift controller (or a hand) appears in VR mode and show a laser beam as many Oculus Rift Native apps has, so we can have a better experience interacting with VrButtons.

Expected behavior

Be able to see Oculus Rift controller and track the movement/cursor with a laser beam in VR Mode.

Actual behavior

Controllers are not displayed in VR Mode.

Reproduction

1. Add a VrButton like in the Demo Application
2. Run Application
3. Open it in Firefox
4. Go to VR Mode
5. Put the Oculus Rift, and grab the Controllers
6. Try to interact with the VrButton. This is unpleasant experience, since you have to guess where the controller is point to.

Solution

I see an example of ThreeJS with HTC Vive Controller, but I haven't see any with laser beam. This could be a good starting point.
I believe other web frameworks such as A-Frame already support this out of the box.

Additional Information

• Operating System: Windows
• Browser: Mozilla/Firefox (VR Mode)
• VR Device: Oculus Rift

[andrewimm]

Here's an input that draws a controller with laser: https://github.com/facebook/react-360/tree/master/Examples/inputs
You'll see it used in a lot of projects we've developed with partners.

Our team is currently working on improving this fuctionality, as well.

[andrewimm]

Actually, even better, what you want is this: https://www.npmjs.com/package/react-vr-controller-raycaster

Add it to your project, it draws a controller and laser, and works for both 3dof and 6dof inputs

[jaider]

Actually, even better, what you want is this: https://www.npmjs.com/package/react-vr-controller-raycaster

Add it to your project, it draws a controller and laser, and works for both 3dof and 6dof inputs

This is for React VR, Does it work for React 360?

[jaider]

I was able to test raycaster package in both: React VR and React 360.

• In React VR works as expected, a "laser" beam with a dot at the end.
  

• In React 360 I had a little of challenge:
  First I got this error:

failed: UnableToResolveError: Unable to resolve module ovrui from E:\my-playground\demoReact360\client.js: Module does not exist in the module map

I fixed by installing the package manually npm install --save ovrui
and works but the "laser" is not displayed, only the dot at the end.

[jaider]

The Input example also is build for React VR. Visually, looks great! like native laser from Oculus, but projection over View is off. It only project great on the background (chess).
The default static position of the hand/control is a little forward, but I don't mind it.

[devsatish]

Any way we could this working with React 360? This seems to be only working with "vr instance" . I can only see the dot, but not the laser nor the "controller/hand"

[devsatish]

I was able to get it working with React 360. Cloned ControllerRayCaster.js and
made these changes

1. add a mesh builder to generate mesh and add it to scene, in the constructor. Make sure to pass the scene from ReactInstance to the Controller, otherwise initialize with a new THREE.Scene

2. Update fillDirection to update the position and quaternion of the mesh

3. Update fillOrigin to update position of the mesh

4. Added code changes from this commit to support Left/Right - whichever controller is active

[dudusotero]

@devsatish are you able to create a working example of it? I can't reproduce your tips with success at this moment. My main goal is to make Gear VR controller work with React 360.

[irajneeshgupta]

@devsatish @andrewimm
how you make ControllerRayCaster run , please let us know
I also followed but no luck , please help there is no example for ControllerRaycaster in the Examples.
All the examples are using react-vr not react-360.