How would I process accelerometer data to use it for camera rotation?

Question

I'm using Three.js to make a web-based 3D first-person game. I would like the player to be able to control the camera rotation with their device's accelerometer.

The sensor data is received via the DeviceMotionEvent event listener. Here is an example of what it returns:

How should I proceed with this?

Answer 1

You don't need to use the accelerometer, there's already a way to get the device's orientation with the deviceorientation event:

addEventListener("deviceorientation", function(e) {
    // This function is called when the phone rotates
    // e.alpha is the angle around the y axis (yaw)
    // e.beta is the angle around the x axis (pitch)
    // e.gamma is the angle around the z axis (roll)
});

If you really want to use the accelerometer, then here's how to do it:

Take the acceleration vector and subtract it from the accelerationWithGravity vector, the result is the gravity vector. This always points down (except if you are in space), so you can normalize the vector, get the angles of it and negate them. This should result in the orientatiom of the device.