How to switch between orbit controls and device orientation controls(R3F)

Hey, I am trying to give users an option to switch between the controls by clicking on a button.
I have tried doing this

{isOrbitControl ? <OrbitControls
      /> : <DeviceOrientationControls/>}

this is not working. The controls get stuck when shifting to DeviceOrientationControls.

I got it working by rendering both controls and using the enable property on both controls. I set enable=true on the component which is currently selected and enable=false on the other in useEffect. Now when on mobile if I don’t move the mobile for 2 seconds the deviceorientationcontrol gets stuck.

Can someone guide me on what is the proper way to do this.

I have also created this sandbox which can reproduce the above issue. Sandbox

Open the sandbox on mobile and click on change controls to switch. Keep your mobile static for 2 to 3 seconds on orientation controls to see it get stuck.

it should just be

  ? <OrbitControls />
  : <DeviceOrientationControls />

the three/jsm controls are a little problematic because they have constructor side effects: i think we fixed at least orbitcontrols (in three-stdlib, our fork of three/jsm), but devicecontrols i think they still call connect in the constructor.

can you please try orbit and trackball and confirm if it works. if it does you can open an issue at three-stdlib, we’ll fix it there. i wish threejs would fix it at the source and there was an open pr once but i think it got lost again along the way.

Sorry for the late reply.

devicecontrols still get stuck if I do this.

I also tried trackball controls but they are also not working.