# How do I keep mesh centered no matter the width of the browser?

**URL:** <https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026>\
**Category:** Questions\
**Tags:** math\
**Created:** [June 8, 2022, 11:48am UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026 "2022-06-08T11:48:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eddy\_Stream](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eddy_stream/32/14045_2.png) [@Eddy\_Stream](https://discourse.threejs.org/u/Eddy_Stream)\
**Post date:** [June 8, 2022, 11:48am UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/1 "2022-06-08T11:48:37Z")

</div>

I have content that takes half the viewport, behind that content is a canvas that covers the entire page 100vh and 100vw . This is what it looks like with a small width, notice how the cube is centered, which is what I want.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/7/a75a815b532c2b65a40a9ecec461ff56ac6e4705.png)

But when I resize the window’s width, this is what happens, (I also show what I want in green).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/ebef81ec586c5865c5358c30292f5885e23a1904.png)

If it helps, here are two sites that keep their meshes centered no matter the width of the page (for the second one you have to scroll down for a bit until the camera moves).

[https://threejs-journey.com/](https://threejs-journey.com/) [https://bokoko33.me/](https://bokoko33.me/)

Here’s my codepen: [https://codepen.io/eddystream-7/pen/oNEPNpx?editors=1111](https://codepen.io/eddystream-7/pen/oNEPNpx?editors=1111)

If it helps, I noticed that on both of the sites, their width and height on their canvas is twice as big as the style, not exactly what sure that means.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/2/022e8a7da4300372f46b48ebd21164d41d990807.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 8, 2022, 12:24pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/2 "2022-06-08T12:24:59Z")

</div>

If the canvas is 100vw then 0/0 would be center of the screen, if you want it in the center of the second half then obj.x has to be viewport.width / 4 and this has to be refreshed on every resize.

---

<div class="post-metadata">

**Author:** ![Eddy\_Stream](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eddy_stream/32/14045_2.png) [@Eddy\_Stream](https://discourse.threejs.org/u/Eddy_Stream)\
**Post date:** [June 8, 2022, 12:31pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/3 "2022-06-08T12:31:42Z")

</div>

Thank you for your answer, let’s say it’s my camera moving on x and z direction instead but my mesh remains at (0,0,0). What would I do differently? Currently my camera is what moved but my mesh remains at 0,0,0 and I’m using lookAt to look at 0,0,0

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 8, 2022, 12:47pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/4 "2022-06-08T12:47:57Z")

</div>

i don’t know, probably a lot of math. you have a viewport that consists of how many three units will fill the screen, you would normally use that to position objects or keep them responsive to resize.

if i had to do it: [wizardly-mclean-j7fpqq - CodeSandbox](https://codesandbox.io/s/wizardly-mclean-j7fpqq?file=/src/App.js)

this is how you calculate viewport if i’m not mistaken:

```nohighlight
let viewport
const { width, height } = size // canvas size in pixels
const distance = camera.getWorldPosition(position).distanceTo(new THREE.Vector3(0, 0, 0))
if (isOrthographicCamera(camera)) {
  viewport = { width: width / camera.zoom, height: height / camera.zoom }
} else {
  const fov = (camera.fov * Math.PI) / 180 // convert vertical fov to radians
  const h = 2 * Math.tan(fov / 2) * distance // visible height
  const w = h * (width / height)
  viewport = { width: w, height: h }
}

```

calculating camera to do the same would most likely be worse, but i don’t know.

---

<div class="post-metadata">

**Author:** ![Eddy\_Stream](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eddy_stream/32/14045_2.png) [@Eddy\_Stream](https://discourse.threejs.org/u/Eddy_Stream)\
**Post date:** [June 8, 2022, 1:03pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/5 "2022-06-08T13:03:15Z")

</div>

No problem, and thank you for your help. That does seem incredibly complicated math, I don’t really understand any of it. Maybe I will just move my mesh instead until I get better at math.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 8, 2022, 1:03pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/6 "2022-06-08T13:03:49Z")

</div>

welcome to threejs 😄

---

<div class="post-metadata">

**Author:** ![Eddy\_Stream](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eddy_stream/32/14045_2.png) [@Eddy\_Stream](https://discourse.threejs.org/u/Eddy_Stream)\
**Post date:** [June 8, 2022, 2:46pm UTC](https://discourse.threejs.org/t/how-do-i-keep-mesh-centered-no-matter-the-width-of-the-browser/39026/7 "2022-06-08T14:46:37Z")

</div>

Ha, I actually contacted both of the creators of the sites and they responded, one of them just moved and changed the canvas size not the actual scene itself, and the other one did what you suggested, they never moved the camera, they just moved the object. Thank you again, I appreciate it.