Match MCU orientation in browser

Questions
1

I am creating a digital twin POC that includes a 3D model of the sensor used to generate the data. Using device gyroscope I get the X-Axis to match orientation of device in near-real-time, but adding Y and Z flakes out badly - flipping, incorrect axis etc.

  • I found info about DeviceOrientationControls but this was dropped from Three. And it was for tracking the device you are viewing the app on where my case has orientation data go to a server and then React.
  • I have also seen where quaternions can be used to match other objects in scene - not doing that, and have not found any demos doing what I am attempting.
  • I have accomplished a lot using Three in a short time and I hope I can go deep on this one area and wrap the POC.

Has anyone done similar?

Point me to a working example?

Thanks!

2

It’s unclear what you’re attempting, are you trying to rotate the camera or an object with a devices gyroscope? Device orientation controls can be pulled from the last version of three to include it, they’ll rotate the scenes camera accordingly and would need modification to rotate an object…

You can also add a deviceorientation event listener directly like so…

window.addEventListener(“deviceorientation”, function(e){
object.rotation.set(e.beta, e.gamma, 0);
});

You could create a max min value from this input which is smoothly transitioned with lerp as well as calculate over rotation by creating conditional statements if the orientation is above or below a certain threshold, bare in mind the results from this could vary quite dramatically depending on the device used as well as ios explicitly requiring permission to access device orientation events

3

@Lawrence3DPK More background: I have a rectangular prism shaped device with a gyroscope on board. I have a rendering of that same device in my browser via a react app. When I rotate the device in X Y or Z I want to see the rendering match the rotation. A slight delay is OK.
IMG_3234

4

OK that makes more sense, you don’t need device orientation controls directly as you’re using an external device, what sort of values are you getting from the controllers gyroscope? I’m guessing you’ll need to normalise the input values somewhat…

If you scope the DeviceOrientationControls from previous versions you’ll notice #1 the exchange of rotation order to YXZ on the controlled object and #2 a conversion from degrees to radians for each input value… MathUtils.degToRad( device.alpha )

Have you already attempted to apply these mutations to the devices input values?

5

the gyroscope sends degrees. I convert the degrees to radians and it seems to work, albeit very slowly. I am not using DeviceOrientationControls, rather I am setting the X Y and Z values of rotation in the useFrame hook (the React method for next animation frame)

One thing that is still a problem is the device orientation always starts tilted about 30deg up on the Left (Z-axis). I wonder if this is related to a default in the react-three-fiber defaults.

I am not required to set up a camera using that library, but consequently am unfamiliar with how to set one up using react jsx notation.

1 Like
6

I tilted the model in the opposite direction and it seems to cure it. The camera was not the root cause.
The rotation/orientation is no longer working - the device moves on screen but returns to the starting orientation.