stewdio / THREE.VRController

Support hand controllers for Oculus, Vive, Windows Mixed Reality, Daydream, GearVR, and more by adding VRController to your existing Three.js-based WebVR project.
https://stewdio.github.io/THREE.VRController/
MIT License
230 stars 33 forks source link

Example to target objects other than Dat gui ? #11

Closed danrossi closed 6 years ago

danrossi commented 6 years ago

I can't seem to find an example here to get the controller clicking objects with a raycaster. It for some reason is using Dat gui only.

Any ideas ?

stewdio commented 6 years ago

Hi @danrossi. VRController has no raycasting routines—that’s an additional layer for you (the developer) to add, tuned to your own needs. The DAT GUI (Data Arts Team Graphic User Interface) is one such additional layer that can do this. But if there’s a big want for this functionality to be merged into VRController that might be a fun thing to add.

In the meantime, here’s an example that uses a ton of raycasting to target objects: Space Rocks. Check out the Space Rocks repo. The way it works is that the controller fires plasma bolts and those bolts raycast to see if they are hitting something. Bolt.js line 79 is where the raycaster test takes place. If that plasma bolt hits a button then that button’s action gets executed.

You might also be interested in player.js which is what interacts directly with VRController: Line 516: Listen for VRController to provide a link to the controller instance. Line 668: Check to see if the primary button (trigger) is being pressed. Line 630: Request the firing of a plasma bolt from the cannon. (It will fail if a bolt has been fired too recently. Right now I maintain at least 130ms between bolts—that just felt about right.)

And in Bolt.js: Line 52: Apply the controller’s matrix to this bolt so it’s in the correct position, orientation, and scale, ie. emerging from your plasma cannon (the controller). Line 62: Set the bolt’s velocity such that it shoots in the correct direction.

danrossi commented 6 years ago

Ok thanks for that I tried to decipher what its doing but can't.

It doesn't need to be built in but on the example. I guess what is needed is a laser line or reticle that moves with the controller object. Which can be used for the Raycaster ? Much like the native controller in GearVR.

danrossi commented 6 years ago

I guess what I am talking about is a demo integration like the original controller in three.js. It uses a laser object to use as the RayCaster. I am just a little not sure how to replicate this controller over.

https://threejs.org/examples/#webvr_daydream

danrossi commented 6 years ago

Possibly ok to close unless a second demo is needed. I kind of have something to work with now. This laser line can be used for intersect. And I guess it will only intersect if the button is pressed.

var gamepadHelper = new THREE.Line( new THREE.BufferGeometry(), new THREE.LineBasicMaterial( { linewidth: 4 } ) );
    gamepadHelper.geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 10 ], 3 ) );

controller.add(gamepadHelper);

This adds a line that extends the controller model. The line needs to thin out like the native one does, and it needs to change position when hitting an intersect object.

danrossi commented 6 years ago

Here is something on the lines I mentioned. The raycast is hitting just under the object however. I can get it to change colour on button press.

https://github.com/danrossi/THREE.VRController/blob/master/raycast.html

danrossi commented 6 years ago

I've updated the example to reposition the line distance to the intersect object. However it detects an intersect at an offset underneath the box. Any ideas what could cause this in the controller ? Is there an offset that needs to apply to the raycaster ?

If I direct the line to a region underneath the box it will detect a click and hit properly.

danrossi commented 6 years ago

Closing and starting again. I have the raycaster partially working but there is a problem.