Three.js设备方向控件：限制或禁用XY旋转

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;
});

Answer 2

You can alternate DeviceOrientationControls js by adding the below line behind setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient ); in this.update function:

this.object.rotation.x = 0;
this.object.rotation.z = 0;

Then you got camera motion only in y direction.