# Position Mesh relative to screen size

**URL:** <https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457>\
**Category:** Questions\
**Created:** [September 4, 2019, 4:13pm UTC](https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457 "2019-09-04T16:13:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CLB\_ZReality](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/clb_zreality/32/4293_2.png) [@CLB\_ZReality](https://forum.babylonjs.com/u/CLB_ZReality)\
**Post date:** [September 4, 2019, 4:13pm UTC](https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457/1 "2019-09-04T16:13:00Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [September 4, 2019, 5:03pm UTC](https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457/2 "2019-09-04T17:03:47Z")

</div>

This sounds very tricky indeed. This topic [parse(convert)toVector3 ( by reference to canvas or viewport. )](https://forum.babylonjs.com/t/parse-convert-tovector3-by-reference-to-canvas-or-viewport/3970) 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](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.

---

<div class="post-metadata">

**Author:** ![nedcrow](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nedcrow/32/2663_2.png) [@nedcrow](https://forum.babylonjs.com/u/nedcrow)\
**Post date:** [September 6, 2019, 7:02am UTC](https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457/3 "2019-09-06T07:02:40Z")

</div>

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 중 더 보기 좋은 것은?
};
```

---

<div class="post-metadata">

**Author:** ![CLB\_ZReality](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/clb_zreality/32/4293_2.png) [@CLB\_ZReality](https://forum.babylonjs.com/u/CLB_ZReality)\
**Post date:** [September 6, 2019, 7:07am UTC](https://forum.babylonjs.com/t/position-mesh-relative-to-screen-size/5457/4 "2019-09-06T07:07:28Z")

</div>

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 🙂