Devicemotion event question

Questions
1

I have a camera animation for desktop which goes like this: in mousemove event I have

mouseX = (event.clientX - windowHalfX) / 100;
mouseY = (event.clientY - windowHalfY) / 100;

and in the render function I have

camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;

I want to achieve the same effect with a mobile gyroscope. I tried this:

in the deviceorientation event

gammaRotation = event.gamma;
betaRotation = event.beta;

and in the renderer function I have mostly the same thing as with the desktop version

camera.position.x += (gammaRotation/100 - camera.position.x) * 0.05; 
camera.position.y += (-betaRotation/100 - camera.position.y) * 0.05;

But when the beta is 90 ( thats when the phone is vertical to the ground 90 degrees) my camera jumps to one site to another and then goes back to working correctly. It only “jumps” when beta is 90. I guess it’s a math error, but can’t really work it out because I don’t know how to enable inspector for Iphone right now…Maybe someone knows the answer to why this is happening
Thanks!

2

/cc

3

@Ilija_Marinovic have you looked at device orientation controls?
you could either import them as controls to use in your scene or look at the js they contain to try to find a solution?

https://threejs.org/examples/jsm/controls/DeviceOrientationControls.js

4

I don’t think that’s what I want, this just rotates the camera, or am I wrong?
I want to take the value of the rotation on the x and y and just translate it to a bit of movement ( not rotating the camera ) to left/right up/down and have the camara.lookAt(0,0,0) .