2D Goal Compass

Hello all, I am attempting to create a “2d” goal compass that is attached to and moves with the camera. Essentially I want the tip of the arrow to always point at the center of the desired mesh with a rotation around the origin. Right now I get a “shadow” effect and it does not point correctly.

I will probably disable the mesh when it is on top of or close enough to the goal, but for now, I am just working on the pointing functionality. Utilizing lookAt causes it to lose its form / “2d” aspect. Any help would be appreciated :slight_smile:

Here is the playground thus far: https://playground.babylonjs.com/#6LFX67#3

Welcome aboard!

You can compute the angle between the camera forward direction and the direction from the camera to the sphere.

As the arrow is in a 2D top view plane, we should remove the Y coordinate from the computation. Also, we need to compute the cross product of the two vectors to apply the correct sign to the angle:


Hello @Evgeni_Popov and thank you for the warm regards and your solution. I feel like I did a poor job explaining the scenario. The solution does work, partially for what I need (my fault for the bad explanation), and I have been trying to adapt it to my requirements. Unfortunately, I have been unsuccessful thus far.

So when I mentioned rotating around origin, I meant of the camera’s view origin. I have a crosshair that it will be rotating about to help guide the user to the target/goal. Also, the math may be a little more complex with the following requirements (or not, I’m not a math wiz). The arrow should not point south/down if the target is behind the camera, instead it should point east or west (whichever turn is closer). The arrow should point north (above the horizon) if the goal is above the cameras view and vise versa if it is below. Ideally it would be the difference between the 2 that provides the rotation (i.e. - if the target is above and to the left then the arrow would aim NW).

I do appreciate your time and help in this matter, and look forward to hearing from you (or others) in the near future.

Thank you,

P.S. - Here your playground with the crosshair added https://playground.babylonjs.com/#6LFX67#6

Update: I believe I have simplified the math, and it looks like it mostly is rotating correctly ( it does still point south/down if the mesh is behind :frowning: - but maybe it’s unavoidable and something math wise I am not catching on to). Now to keep toying and see if I can get the rotation around the view center versus its local z.

Edit: keep forgetting to attach pg - https://playground.babylonjs.com/#6LFX67#7

Alright I think I got it! https://playground.babylonjs.com/#6LFX67#8
But I am interested in hearing if it is possible to keep it from pointing down when the target is behind.

You can clamp the values of inRads so that the arrow does not point backward: