I am quite new to all this 3D stuff so I have a problem understanding how I can archive my goal.
I have a Web AR app build with Babylon JS to display artworks on your wall via AR. This is all working fine and I am really happy how easy to use and awesome babylon JS is even for someone completely new to anything 3d related.
But I face one issue I can’t find a solution for.
My object is an rectangular canvas and it rotates somewhat random around the z axis when I want to place it on a wall after the hit test was successfull.
I created an image to illustrate the issue and what I want to archive.
I have the bad solution at the moment and I want to get either the ok solution or better the perfect solution.
I don’t expect any code examples, I just need to get pointed in the right direction I hope.
Do I have to lock the Z-Axis of this quaternion thing I have for my canvas which is calculating the rotated position of my canvas?
And is it even possible to get to the perfect solution? Do I need other sensors of the phone for that too? And if so, are they available in the browser?
Hey @abenil - First and foremost, welcome to the Babylon family! It’s a pleasure to have you here!
Is there any way you could provide a playground example? That’s always the easiest way to understand what you’re trying to achieve and the best way for the community to help.
Thank you for your warm welcome.
After struggling pretty much with porting my app to the playground, I created a short replica of what I try to do: https://playground.babylonjs.com/#XWBES1#114
The canvas dummy in this example “jumps” in orientation around the axis which is going through the surface it detected and I want it to either stay correctly aligned which seems to be impossible or at least “snap” to the orientation of the phone like in my “ok” illustration.
I hope it is more clear now what I trying to archive.
So, this requires a bit of math and vector manipulations
This is the transformation we are getting from XR, so there is nothing we can do directly do get it “correctly” from XR. however, if you transform the up vector and another vector (on the X axis, in our case), you can get the dot product between realy world UP and the “right” vector, and rotate around the transformed Up vector. In code it looks like this:
