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:
- Download Chrome Beta 56 on your Pixel:https://www.google.com/chrome/browser/beta.html
.
- 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
}
