Combine rotations so item always faces camera... but also faces the bottom of the screen

Questions
,
1

The goal is to get a hotspot that always faces the camera… but as its an info icon, the request was to get the i to always face the bottom of the screen (like text). Ive been pounding my head against the wall for days trying to get the math right to combine the rotations to get this correct with no luck. Wondering if anyone with better math chops can help out? Attached a playground below.

2

You shouldn’t do that. It’s not good for your health :wink:
I would rather use the 2D GUI for that. Guaranteed without damage to your head.
May be have a closer look at this section of the doc
If still struggling let us know, preferably before you get a brain damage :brain: :wink:

3

There are some other reasons we are using 3d (there are some animations on hover that look all nice and sparkly that require 3d). Haha trust me, i wish we could use 2d for this.

4

I believe you but I wonder what this is. Could you share this with us in a PG so we can get a complete understanding of it?

Edit: And also, can you confirm the arcRotateCamera is the camera (and only camera) you need for this?
Because, it’s clearly not the easiest to tweak :wink:

5

Arc rotate camera is the only camera i need for this. Basically the hotspot does a little waggle and dance that shows that it has depth

6

And then of course, a wiggling camera would not do the same effect, yes? If not for a PG, could you make a small video of the animation effect?

7

I can try to do a PG in a bit, i dont have a video, just basically that description. Would a 2d-gui ever have depth?

8

No, 2D is 2D. However, there’s also the 3D GUI and there’s also a combination of both.
Fact is the arcRotateCamera (as you may have noticed while doing dangerous things with your head against walls :wink: will not make it easy at all to handle this. So any alternate solution we could find is worth considering.

9

Ah gotcha. Looking through the documentation now, looks like mesh button 3d may be what im looking for?

10

May be. Again, hard to help without a PG or even a visual.

11

I have a visual and a PG for what i am trying to accomplish. I want it to face the camera but always face up/down. Mesh Button 3d doesnt seem to help with that. I think even if i use MeshButton3d, i would still need the same quaternion multiply

12

Solved it! needed a secondary twist rotation based on the bottom of the screen position: https://playground.babylonjs.com/#NQGD89#2

2 Likes