Smooth Transition between OrbitControls and DeviceOrientationControls

Hi guys, I’m new to the three.js and need some help.
I want to be able to switch between OrbitControls and DeviceOrientationControls with a button click on mobile devices which support device orientation.
The problem is I don’t know how to switch between those two without camera jumping.

gyroscope_controls = new THREE.DeviceOrientationControls( camera );
controls = new THREE.OrbitControls(camera, m_renderer.domElement);

The switch state button:

gyroscope_button.onclick = function(e){
    e.preventDefault();
    gyroscopeEnabled = !gyroscopeEnabled;
    $(this).toggleClass('push');
    chooseControls();
}

And the switch function:

chooseControls (){
        if (orientationSupported && gyroscopeEnabled) {
            gyroscope_controls.connect();
            gyroscope_controls.update();
            controls.enabled = false;
            console.log("gyroscope");
        }
        else {
             controls.update();
            gyroscope_controls.disconnect();
            controls.enabled = true;
            controls.enableZoom = false;
            console.log("manual");
        }
}

Thanks again!

Does the camera jumping happen in both directions? I mean when you switch from OrbitControls to DeviceOrientationControls and vice versa? Or just in one?

Hi, thanks for answering,

Yes it jumps in both directions.
I’ve included both .js files (orbitControls and deviceOrientationControls) and they both work and switch on button click… it is just they are not linked with each other.
Also I noticed, Orbit Controls is the Boss, if it has controls.enabled = true, deviceOrientationControls never show up. probably I messed some settings up in in my “chooseControls” function.
Also tried to implement this https://www.learnthreejs.com/device-orientation-gyroscope-controls-tutorial/ but with no luck.

Thanks again.

I’m having the same issue here, and I can’t get my head around a working solution so far.

Similarly to the OP, I have a button allowing to switch from manual to gyro mode (using DeviceOrientationControls connect() and disconnect() functions). But as soon as it switches, the camera view switches too.

Intuitively, I think the orientation values (alpha, beta, gamma and screen orientation) of the actual position of the device are passed to the camera and the latter is updated accordingly. Therefore, I guess a solution would be to set the first position of the camera (once the gyro mode is activated) back to the one of the latest view (before gyro activation).
But I am lost in the maths and orientation of the scene vs the device. Anybody to help on this, please?

In other words how to apply a correction to the quaternion of the camera in gyro mode, so as to have the same quaternion than the camera in manual mode? I have tried dumb linear algebra (Q_after - Q_before), but the view goes crazy.

PS: There seem to be a ‘YXZ’ reordering of the camera rotation by the DeviceOrientationControls, it may matter.

In case someone is facing the same problem, the solution in this thread in StackOverflow has been my best option so far.