Synchronize perspective camera position while switching between OrbitControls and DeviceOrientationControls

Questions
, , , , ,
1

In my application ( React JS ) I’m switching between orbit controls and device orientation controls

import { DeviceOrientationControls, OrbitControls } from '@react-three/drei';

 ...

 const [isGyroscope, setIsGyroscope] = useState<boolean>(false);

 ...

 return (
    <>
      {!isGyroActive ? (
        <OrbitControls ref={orbitRef} />
      ) : (
        <DeviceOrientationControls ref={deviceRef} />
      )}
    </>
  );

Using three JS I’m showing a 3D image in a sphere.

<Canvas>

  <mesh
   dispose={null}
   position={position}
   >
    <sphereGeometry
     args={[6, 64, 64]}
     attach='geometry'
    />
    <meshBasicMaterial
     attach='material'
     toneMapped={false}
     map={!isOriginalImage ? after : original}
     side={1}
    />
     {children}
  </mesh>

  <PerspectiveCamera
   makeDefault
   dispose={null}
   ref={cameraRef}
   fov={77}
   near={0.01}
   far={100}
   position={cameraPosition}
   zoom={zoomLevel}
  />
 </Canvas>

So, I need to synchronize the camera position while switching from orbit controls to device and vice versa. I was able to keep the same camera position ( same scene ) after turning the gyroscope on ( swithcing to device controls ) using alphaOffset

But I wasn’t able to get the correct camera position after turning the gyroscope off ( switching to orbit controls after user was on device controls and was able to move the phone )

While the gyroscope is on and phone is moving, I was able to get the alpha, beta and gamma using deviceorientation event. And here is what I was trying to do to get the corresponding camera position:

if (orbitRef.current && lastDevicePosition) {

  const { alpha, beta, gamma } = lastDevicePosition;

  if (alpha && beta && gamma) {

   const alphaRad = Three.MathUtils.degToRad(alpha);
   const betaRad = Three.MathUtils.degToRad(beta);
   const gammaRad = Three.MathUtils.degToRad(gamma);

   const euler = new Three.Euler(alphaRad, betaRad, gammaRad, 'YXZ');

   orbitRef.current.object.rotation.set(euler.x, euler.y, euler.z);
   orbitRef.current.update();
  }
 }

I’ve tried also to update the quaternion but this as well didn’t work as expected. The camera position is being the same as it was when turning the gyroscope on, and not when turning it off.

So, I guess I need a function which will convert alpha, beta and gamma to the Vector3 to be able to update the camera position.