Calculate offset position of plane based on camera and fixed plane position

Questions
,
1

I have the following situation (Babylon.js Playground):

  • An ArcRotateCamera which looks at a plane (gray) and next to the plane another plane (purple) is placed.
  • The camera position is known.
  • The plane (gray) position is known
  • The plane (purple) position is currently being calculated by adding either an X or Y value (offset) to the plane (gray) position to place it next to it.

Now I basically want to exchange the position calculation of the purple plane with this: Based on the position of the camera to the plane (gray), position the plane (purple) e.g. to the right side of it by 3 (offset) as in the example.

So basically have the plane (gray) always next to the plane (purple) in view with a fixed offset.

It is probably really simple, but I just can’t get my head around it how to do it properly.

2

Hello and welcome to the Babylon community! You’ll probably want to use Vector3.Unproject: Vector3 | Babylon.js Documentation (babylonjs.com) to go from screen space to world space:

image
image775×261 8.21 KB

Something like this, with adjusted values: Arrange planes according to camera position | Babylon.js Playground (babylonjs.com)

3

Hello, thanks for the nice welcome! The issue is that I want to set the position of plane B not in my screen, but in the world, so that if I zoom out both planes are getting smaller as well.

So basically draw a line from my view position to the plane A, go a bit to the right (offset) to place there the plane B.

4

Hmmm, so the plane B should both always be on the right side of the screen, no matter the camera position, AND should zoom out along with plane A, is that right? Unproject should still do the trick then.

5

Maybe I did something wrong then? Because the panel would always stay the same no matter the zooming.

But I found a different solution by using a transformNode as the parent and applying the billboard mode to it and adding the planes to the transformNode as in this playground:

Atleast that would be the behavior I desired, maybe I described it wrongly.

1 Like