Alternate for LookAt for UI

Greetings!

I have a problem and tried solving it but so far i cant seem to acheive the solution, no matter how much i tried.

Here is the problem,

i m trying make my red box, rotate in z axis in the direction of mouse, i do have mouse position vec2, all i need is the exact rotation angle.

I tried,

1)LookAt //with 0 as z value

2)This angle formula
Math.atan2(x, y) * 180 / Math.PI

3)Using window .innerHeight and .innerWidth //Tried to generate formula but it was not 100% correct.

Will appreciate any help :smile:

Hi @ahmad_rizwan and welcome!

For a similar use case @LeXXik made the example project below for me. Maybe it can help you here too.

https://playcanvas.com/project/771954/overview/world-to-ui-screen-space-2

Thank you so much @Albertos , i will check it. :smile:

Hey @Albertos i check out the project, it uses the same formula i mention above with a sight changing

Math.atan2(x- current.x, - (y - current.y)) * (180 / Math.PI)
Current being the ui element axis

I did that with my project but it doesnt seem to work.
The main difference between the two project is, he is using 3d object to lookat, and i m using mouse corrdinates as the direction for lookat.

If you use an element component I think the settings of the component also matters.

Maybe you can share the editor link of your project so someone can take a look.

Here is the link to a Forked project, it has no extra staff, feel free to take a look,dug in, fork it even, and let me know if I can achieve this somehow

https://playcanvas.com/project/1038165/overview/ui-issue

Once again, thank you so much for the support, really appreciate it.

1 Like

You first need to bring the reported touch/mouse position and the position of the UI element to a single frame of reference. For example, the UI element position Y component starts at the bottom, and grows as it goes up, while touch Y component starts at the top and grows as it goes down. Simply add/substract needed width/height from touch position, so that it matches with the UI element position when you click it. Without it, you cannot calculate the angle, as the vectors are not aligned.

I also noticed you do something like this.entity.up.mulScalar(scalar). This will modify up vector of the entity in place. Do not do that. If you need to use entity.up copy it to a temp vector and modify the temp vector then. Also, in your case, you should just create a temp vector [0, 1, 0] and then scale that one - all children will align properly, regardless of parent’s orientation.

Nice, that’s really helpful, thank you for your time @LeXXik

I will try to do that and hopefully get the result.