Three.js Device Orientation Controls: Limit or disable XY rotations

Question

I'm using DeviceOrientationControls to attach to and rotate an Object in Three.js

By default, these controls will rotate the object on all three of the XYZ axes.

Is there any way to disable rotation on the X and Y axes, so that the object only responds to rotation on the Z axis?

Hope that's clear enough, let me know if you need an example. Thanks.

Answer 1

For anyone interested, I was able to achieve this without using the Three DeviceOrientationControls library.

You can just add an event listener for 'deviceorientation' and feed the gamma rotation into the object rotation, like this:

window.addEventListener('deviceorientation', function(e) {
  var gammaRotation = e.gamma ? e.gamma * (Math.PI / 180) : 0;
  bottleGroup.rotation.y = gammaRotation;
});