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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.