Giter Club home page Giter Club logo

stewdio / three.vrcontroller Goto Github PK

View Code? Open in Web Editor NEW
229.0 16.0 34.0 1.04 MB

Support hand controllers for Oculus, Vive, Windows Mixed Reality, Daydream, GearVR, and more by adding VRController to your existing Three.js-based WebVR project.

Home Page: https://stewdio.github.io/THREE.VRController/

License: MIT License

JavaScript 81.96% HTML 18.04%
webvr threejs gamepad vive oculus daydream javascript vrcontroller gear-vr windows-mixed-reality

three.vrcontroller's Introduction

THREE.VRController

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. VRController wraps the Web Gamepad API, handles gamepad browser quirks, emits a controller instance (an extended THREE.Object3D) upon gamepad discovery, handles controller updates for position and orientation—including 3DOF rigs via the OrientationArmModel—and watches for updates on axes and button states—emitting corresponding events on the controller instance. (Pretty great, right?!)

VRController includes explicit support for Oculus Rift + Touch, HTC Vive, Windows Mixed Reality motion controllers, Google Daydream, and has implicit support for Samsung GearVR and similar devices. Is your company developing new hand controllers? Send them my way and I’ll add support for it. 😉

VRController is compatible with Three.js r87 which is the first version to use the new renderer.vr object and was originally submitted to Three.js as pull request #10991 on Saturday, 11 March 2017. Note: that pull request is no longer maintained.

Requirements

  1. Virtual Reality rig with 3DOF or 6DOF controllers such as the Oculus Rift + Touch, HTC Vive, a Windows Mixed Reality rig, Google Daydream, Samsung GearVR, or similar devices.
  2. WebVR-capable browser. For the latest list of browsers that support WebVR—as well as download and setup instructions—see WebVR Rocks.
  3. Working knowledge of Three.js.

Try it now!

Already on a VR rig with a WebVR-capable browser? Just point your browser to https://stewdio.github.io/THREE.VRController/ to experience this code in action.

Do it yourself

  1. Add our VRController.js file to your existing Three.js project and use our index.html example file as your guide for the following steps.
  2. Add a THREE.VRController.update() function call to your animation loop.
  3. Add a listener for the "vr controller connected" global event. This is how you will receive the controller object instance—which is an extended THREE.Object3D. This means you can add it to your scene, attach meshes to it, and so on.
  4. When you receive the controller object instance you must give it some additional information depending on the type of controller. For 6DOF (room scale) rigs you must provide a standing matrix, easily obtained from your WebGLRenderer instance in Three.js r87 and above. This will look similar to: controller.standingMatrix = renderer.vr.getStandingMatrix(). For 3DOF (seated) rigs you must provide a reference to the camera so the controller can use the headset’s live position and orientation to guess where it ought to be: controller.head = camera. There’s no penalty for providing the controller instance with both standingMatrix and head properties as we do in the example.
  5. Explore the available touch, press, and trackpad events by assigning THREE.VRController.verbosity = 1. You’ll now see a flood of verbose comments in the JavaScript console as you interact with your controller. To access controllers directly from the console explore the THREE.VRController.controllers object. To get a snapshot of all controller data try THREE.VRController.inspect().

Run locally

For security reasons you can’t run a WebVR experience by just dragging the index file onto a browser tab. You have to run an actual server. The easiest way to do this on your own desktop machine is to start a simple Python server. Open up a command line prompt, navigate to wherever you’ve stored this code package, then type the following command depending on the version of Python you have installed.

Python 2: python -m SimpleHTTPServer 8000
Python 3: py -m http.server 8000

In your browser you can now navigate to http://localhost:8000/ to see the demo running locally. You can shutdown the local server by returning to the command line and hitting Control + C.

Notes on Chromium’s Gamepad API

If you’re building WebVR experiences and targeting the WebVR build of Chromium you may want to read my Medium post about its quirky behavior and how VRController compensates for it: WebVR controllers and Chromium’s Gamepad API.

Space Rocks!

Space Rocks

Looking for a more complex, fleshed out example of VRController in action? Play Space Rocks now at https://spacerocks.moar.io You can read more about it on Medium or check out the code repository. Look for VRController-related bits in /scripts/player.js.

And for the full technical breakdown, including multi-channel haptic feedback, button handling, and attaching visuals to controllers, see Space Rocks—WebXR tech deep dive.

Space Rocks technical deep dive

three.vrcontroller's People

Contributors

davidlyons avatar paulmasson avatar stewdio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

three.vrcontroller's Issues

Motion controller device ID

'Spatial Controller (Spatial Interaction Source) 045E-065B': {

A few things :)

Firstly - we refer to the current in-market devices as "Windows motion controllers". In terms of naming convention, I would suggest 'motion controllers'.

It is unfortunately not possible to do an exact string match on device ID - the last section (045E-065B) will vary based on the specific connected device. As an example: if you use the Simulator, the controllers will actually come through as:

Spatial Controller (Spatial Interaction Source) 00FF-FF00

We recommend doing a string startsWith test for: 'Spatial Controller (Spatial Interaction Source) ' to determine that the device is a motion controller to choose button mappings.

The next piece of the puzzle is support for the devices pointing ray direction and position offset. You may notice that the device pose does not accurately reflect where you are pointing (this is similar to Oculus Touch controllers). You can really see this if you compare the pointing ray from the VRController to that in the Mixed Reality cliffhouse.

To make matters a bit more complicated - the ray offset and direction actually vary depending on what kind of motion controller is plugged in connected - which is discernable by looking at the code portion of the device ID. As an example, you can use the following regex to get the device code:

/([0-9a-zA-Z]+-[0-9a-zA-Z]+)$/

There are currently 2 distinct devices supported by Windows Mixed Reality, each having a slightly different form factor and pointing direction. (They have the same button mappings). GLB (binary glTF) files of these two devices are available at this fork of the a-frame assets repository:
https://github.com/leweaver/assets/tree/msft/new-controller-model/controllers/microsoft

The pointing pose offset can actually be found in those glTF files, on the node named POINTING_POSE. That node is transformed such that it faces outward in the direction of the pointing pose. It is a local transform, so an attached line would be oriented correctly (ie, it relies on the transform accumulation of the parent nodes).

Happy to provide more info!
Lewis

GearVR Controller Support?

I know this is not specifically mentioned as supported, but I tried out the GearVR Controller with a GearVR and a Samsung S6.

Trying the demo page on this project, I got the following results:

  • Using the new(ish) built in Internet browser on Oculus home - the controller is visible and tracks/points well, but none of the buttons work - I can't interact with the UI elemental via clicking.
  • Using Samsung Internet with WebVR enabled, I get a black screen when loading the page.

Let me know if there is any useful debugging info I can provide for this controller.

Cheers! - James

Xbox ONE controller does not work

Xbox ONE controller returns with a null gamepad.pose field. This is when running the demonstration link. The axis and button fields seem valid.

Is this a known limitation?

Details:
Windows 10
id"Xbox 360 Controller (XInput STANDARD GAMEPAD)"
Google Chrome | 65.0.3325.181 (Official Build) (64-bit) (cohort: Stable)
Chrome flags: chrome://flags/#enable-webvr, chrome://flags/#enable-gamepad-extensions, chrome://flags/#openvr
No VR display hardware attached

I am going to try Firefox.

Controller mesh not "moving" with controller

Hi. First of all thanks for the VRController. So far it's working great.

Having a big problem with the mesh attached to the controller object, as it is not travelling with the controller object. I am not a threejs expert so I might be missing something obvious :-/

I am attaching (your) mesh to my controller as per the example...

 controllerMesh.add(handleMesh);
 controller.add(controllerMesh);

I am attempting to shuttle my camera about using thumbsticks by adjusting the scene position...

 controller.addEventListener('thumbstick axes changed', (event) => {
      this.scene.position.sub(new Vector3(event.axes[0], 0, event.axes[1])); 
 })

For the most part this is working great. Unfortunately the controllerMesh stays put.
I have examined my controller position and it does not change (the scene does). The controller mesh is a child of the controller, so I don't know what I could be missing.
Thanks.

image
image

Edit....
I should add that I initially attempted to update the controller object position within the scene and could not seem to update it. After looking at your "space rocks" example it appeared to me that you were moving the "world" instead of the controller/camera.

Issue when using with RayCaster

I have setup a basic example of using the controller with a RayCaster with a laser line pointer to click on intersected objects.

The intersect point is either above or below the object depending what version of three.js is used. I have integrated the standing matrix fix in r90. The intersect point is now above the object.

When testing against the daydream controller example in three.js the intersect is exact. There seems to be some offsetting and not sure how to remove it perhaps ?

http://dev.electroteque.org/vrcontroller/raycast.html
http://dev.electroteque.org/vrcontroller/daydream.html

threejs r89 not support?

I upgraded threejs to r89, the controller will not work. May I ask you to see this issue? Thank you so much!

npm

Any interest in making this awesome tool available as an npm package?

GearVR / Daydream Gamepad not updated when exiting and entering presentation mode

I am not sure what the story is with Occulus. But the Gamepad instance changes when exiting then re-entering presentation mode. The timestamp is different which can be detected.

A new gamepad instance is required to be updated. I have tried to modify myself but it's not detecting button changes when updating to it yet. I haven't uploaded my tests with a working example yet.

Something like this could detect the change and either update the gamepad or disconnect the controller.

if (this.controllers[ i ].gamepad.timestamp !== gamepad.timestamp) {

In GearVR / Daydream taking off the headset does not dispatch a deactivate event to possible manage gamepad disconnection that way. Only exit presentation events would work.

I guess it has to be disconnected and reconnected ?

Scale user controller

Hello,

I wanna first thank you for the hard work you have put in this project this is truly useful and contribute a lot to the development of VR.
Anyway I'm looking for a way to scale the user according to the scene my character is way too little compared to the model I draw on my scene.
I have achieved to scaled up the controller (hand) but neither my size or camera.
Is their a way I could do this?
Thank you.

Event for original isPressed flag

I needed access to original isPressed boolean in order to fly around the scene with the mouse press. So I have to add this in order to expose it.

if ( button.isPressed && isPrimary ) {
    controller.dispatchEvent({ type: 'primary pressed' })
}

I don't quite understand why it was not exposed original. It is such a basic thing to have.

I can make an PR for that if necessary.

NOLO VR

Hey, great repo - any development with NOLO VR controllers? through SteamVR or standalone?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.