A-Frame Daydream control?

1.2k views Asked by At

Just started playing with A-Frame and I can see vive-controls and oculus-touch-controls but nothing for google daydream.

I've looked at the component repo and don't see anything that looks like it'll do the job. The closest thing to now investigate would be the Gamepad API, but I'm amazed I can't find anything.

I've got a Pixel XL & daydream and would like to incorporate the controller rather than just head tracking and gaze based control. Can someone point me in the right direction please.

Thanks

UPDATE - I've got the Daydream controller working for clicks! Running the 360-image-gallery(https://aframe.io/examples/showcase/360-image-gallery/) accepts clicks from the Daydream controller. I guess maybe it had timed out on my previous attempts or I hadn't paired it properly! I'll keep playing!

3

There are 3 answers

0
ryanbetts On BEST ANSWER

Working on setting up a Daydream remote in an Aframe project. There are no components for the daydream remote yet, but I'm hoping to complete one soon – and it sounds like they are gonna mainline support in an upcoming Aframe release.

But you can hand roll support no problem.

First, there are a few things you'll need to do in preparation:

  1. Download Chrome Beta 56 on your Pixel:https://www.google.com/chrome/browser/beta.html .
  2. Open Chrome Beta, navigate to chrome://flags and enable the WebVR and Gamepad flags.

Now, you will be able to launch experiences that are built with Aframe v0.4 or higher in true WebVR. You'll get prompted with the usual Daydream screens (place your phone in the headset, and connect the remote.) If you are connecting to a local development environment, you'll see a secure connection warning but this, while annoying, won't stop you from working.

Second, now that you are running true WebVR, you need to leverage the Gamepad API to get information from your daydream remote. Lets start by just logging that it is connected.

    window.addEventListener('gamepadconnected', function(evt) {
      console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
        e.gamepad.index, e.gamepad.id,
        e.gamepad.buttons.length, e.gamepad.axes.length);
    });

Third, now that you are logging a connection, you will need to setup an update loop to get the current state of the Gamepad. You can do this with requestAnimationFrame. Follow the tutorial here: https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

Once I've published a basic dayframe-remote component, I'll post a link here. Hope this helps get you started!


EDIT: Looks like the suggestion below works great. Just pass "Daydream Controller" as the id for tracked controls: tracked-controls="id: Daydream Controller".


Here is a sample Daydream controller output. At the moment, only the trackpad button appears to be exposed – not the app or home buttons.

    { 
      axes: [0, 1],
      buttons: [{
        pressed: false,
        touched: false,
        value: 0
      }],
      connected: true,
      displayId: 16,
      hand: "left",
      id: "Daydream Controller",
      index: 0,
      mapping: "",
      pose: {
        angularAcceleration: null,
        angularVelocity: [0, 0, 0],
        hasOrientation: true,
        hasPosition: false,
        linearAcceleration: [0,0,0],
        orientation: [0,0,0,1],
        position: null
      },
      timestamp: 1234567890123
    }
0
machenmusik On

Something for you to try...

the way the current A-Frame 0.4.0 support in tracked-controls should work:

if you specify that it should only match an ID value of empty string '' then it should match any gamepad with a pose... so you can try something like

<a-entity tracked-controls="id:"></a-entity>

and see if that gets events etc.?

0
Paul Siersma On

A-Frame master branch now contains a daydream controller component: https://aframe.io/docs/master/components/daydream-controls.html