Position Mesh relative to screen size

Questions
1

Hey,

i want to place a mesh in 3d space as a child of my camera. But it’s position has to be relative to the screen size. Let’s say i want to pin it on the left upper corner with a margin of 10% screen.width and 10% screen.height. If i now resize the window it should stay in the same place on the screen and scale accordingly. Any ideas how to do that? I can’t use GUI elements, as it has to be a mesh. And i also can’t just place a rendered image of the object, because it is interactive.

Hope for your help, thanks! :slight_smile:

2

This sounds very tricky indeed. This topic parse(convert)toVector3 ( by reference to canvas or viewport. ) looked at a similar problem and playing around with one of the PGs allows you to re-size the screen and maintain a spheres position as in https://playground.babylonjs.com/#JQJ8UM#7. HOWEVER the camera is not attached to the canvas. Attaching the camera moves the sphere as the camera moves. It might help but then again it could be a red herring. Hopefully others more knowledgeable may have more ideas.

1 Like
3

First, my camera mode is orthographic mode.

I used camera’s properties (orthoRight, Left, Top, Bottom).
at under the code, setPivotProp is mesh & camera.

public static setPivotOrthographic = {
  /** positiveNum : -1, 0 ,1 */
  Horizontal(pivotProp: setPivotProp, positiveNum: number = 0, addValue: number = 0) {
    const dir: number = positiveNum > 0 ? 1 : positiveNum < 0 ? -1 : 0;
    const camera = pivotProp.camera;
    let width: number = 0;
    if(camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA && camera.orthoRight != null) {
      width = camera.orthoRight;
    }
    const x = width * dir + addValue;
    pivotProp.mesh.position.x = x;
  },

/** positiveNum : -1, 0 ,1 */
  Vertical(pivotProp: setPivotProp, positiveNum: number = 0, addValue: number = 0) {
    const dir: number = positiveNum > 0 ? 1 : positiveNum < 0 ? -1 : 0;
    const camera = pivotProp.camera;
    let height = camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA ? camera.orthoTop : 0;
    height = height != null ? height : 0; 
    const y = height * dir + addValue;
    pivotProp.mesh.position.y = y;
  }, // H, V 중 더 보기 좋은 것은?
};
1 Like
4

Thanks for your answers, i already have found another solution for myself, as I am using a perspective camera. But i will have a look at @nedcrow solution too :slight_smile: