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:

DeviceMotionEvent output.

How should I proceed with this?

  • \$\begingroup\$ This question is too light on details. Please edit it to explain more - what kind of sensor are you using (IMU, MARG, etc), and which stage of the process do you need help with? Reading input from the sensor? Performing sensor fusion or smoothing? Transforming that motion data into a rotation representation? Scripting your camera to follow this rotation? Or something else? It's a bit much to ask for a ready-made "complete solution" - show us what you have so far & where you're stuck. \$\endgroup\$
    – DMGregory
    Commented Jan 2, 2017 at 20:48
  • \$\begingroup\$ @DMGregory edited it. do you need more details? \$\endgroup\$
    – user72692
    Commented Jan 2, 2017 at 20:57
  • \$\begingroup\$ @DMGregory probably I need to set camera's yaw and pitch. basically, the same thing you would set with a mouse in most FPS games, but with accelerometer. \$\endgroup\$
    – user72692
    Commented Jan 2, 2017 at 21:00
  • 1
    \$\begingroup\$ So, would it be fair to describe your problem as "how do I convert from an acceleration vector to a camera angle?" In that case, you should explain what kinds of device motion should translate into what kinds of camera motion (as with many geometric problems, images probably help here). In particular, I note that your rotation rate data is null. Without this, you won't be able to determine whether the device is rotating around the axis of gravity, so your proposed camera control scheme should take that into account. \$\endgroup\$
    – DMGregory
    Commented Jan 2, 2017 at 21:03
  • \$\begingroup\$ @DMGregory There's nothing wrong with this DeviceMotionEvent object, in particular that the RotationRate is null. \$\endgroup\$
    – user72692
    Commented Jan 2, 2017 at 21:56

1 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.


You must log in to answer this question.