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

Questions
, ,
1

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
        ref={orbitControls}
        enableZoom={false}
        enablePan={false}
        enableDamping
        dampingFactor={0.1}
        autoRotate={false}
        rotateSpeed={-0.5}
        autoRotateSpeed={1.0}
      /> : <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.

2

it should just be

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

the three/jsm controls are a little problematic because they have constructor side effects: https://github.com/mrdoob/three.js/blob/e5f52a569fe14a47b0b4dacea633e5ecc3b38660/examples/jsm/controls/OrbitControls.js#L1253-L1261 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.

3

Sorry for the late reply.

devicecontrols still get stuck if I do this.

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