title: How to make geometry retain its size regardless of the size of the renderer - Plane changes size depending on screen size
body: <p><a href="https://i.stack.imgur.com/CwUxD.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CwUxD.gif" alt="enter image description here" /></a></p>
  <p><strong>Visual helper and source code</strong>
  Im adding a codepen of the issue. And a GIF showing exactly what im confused by.
  Codepen: <a href="https://codepen.io/carelesscourage/pen/bGMWjNg" rel="nofollow noreferrer">https://codepen.io/carelesscourage/pen/bGMWjNg</a></p>
  <p><strong>My expectation:</strong>
  I want the plane to be the same size reguardles of screensize.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//WebGl renderer
  function useWebGl(root = document.body) {
    const renderer = new THREE.WebGLRenderer({ alpha: true })
    renderer.setClearColor( 0x009900, 1 )
    renderWindow(renderer)
    root.appendChild( renderer.domElement )
    onResize(() =&gt; renderWindow(renderer))
    return { WebGl: renderer }
  }
  
  function renderWindow(renderer) {
    const { height, width } = windowDimensions()
    renderer.setSize( width / 2, height / 2 )
  }
  
  
  //ThreeJS Engine
  function initEngine() {
    const scene = new THREE.Scene()
    const camera = getCamera()
    
    const { WebGl } = useWebGl()
    function everyFrame(callback = () =&gt; {}) {
      callback()
      WebGl.render( scene, camera )
      requestAnimationFrame(() =&gt; everyFrame(callback))
    }
  
    return {scene, everyFrame}
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>###everything bellow this line is from the initial post. Ive fixed some other issues and simpyfied the codepen down to the exact issue im wanting help with. So the text above this line is the actual issue, and bellow this line is just for the sake of keeping the record</strong></p>
  <p><a href="https://i.stack.imgur.com/qakGW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qakGW.gif" alt="enter image description here" /></a></p>
  <p><strong>Context:</strong>
  Ultimatley my goal is to make a plane in three.js that matches/overlaps an HTML element and sticks to it. But I dont expect anyone to do all that work for me. The only think im asking for right now is how to make the size and position of the plane be consistent across screen sizes. And in fact, we could probably limit this issue to just the size.</p>
  <p><strong>Issue:</strong> If the plane is 10px from the left on one screensize it should remain 10px from the left on all other screen sizes. Right now, instead of getting that im getting the plane jumping all over the place. Its not just a resize update issue, if you refresh the page every time you try to change the window size you will still see that the plane is in random places and at random sizes(as demonstrated in the gif). In the code im setting the size of the plane with the size of the html image. But even if I set the size statically, the plane still randomly changes size on diffirent screen sizes.</p>
  <p><strong>Reguarding position:</strong> In the code im basically telling the plane to move to the top left edge of the canvas, and then offset back to the position of the HTML element based on that elements position from the top right of the screen. Which works. But only for my fullscreen desktop view. When the window changes size suddenly the offset isnt accurate anymore. Why? Sometimes the plane even changes size.</p>
  <p><strong>My expextation:</strong>
  I expected the plane to be the same size reguardles of screensize?</p>
  <p><strong>My best guess:</strong>
  The issue is not related to the way im offseting the position of the plane. I know this because you can dissable all of that and you still get the plane moving around in size and position on diffirent screen sizes.Since dissabeling all code related to position and size still doesnt get rid of the issue of the plane changing size im assuming the issue has to be related to the way im dealing with he camera. Im using an orthographic camera though it should be noted that the same issue is also present when using the perspective camera.</p>
  <p>If my guess is right the problem should be with this part of the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function windowDimensions() {
    const height = window.innerHeight
    const width = window.innerWidth
    const aspect = width / height;
    return { height, width, aspect}
  }
  
  function cameraDimensions(aspect, viewSize = 1000) {
    const caps = viewSize / 2
    const sides = aspect*viewSize / 2
    return { caps, sides }
  }
  
  function getCamera() {
    const { aspect } = windowDimensions()
    const { caps, sides } = cameraDimensions(aspect)
  
    //const camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 )
    const camera = new THREE.OrthographicCamera(
      -sides, sides,
      caps, -caps,
      -1000, 1000
    )
  
    window.addEventListener('resize', () =&gt; {
      updateCamera(camera)
    })
    
    camera.position.z = 500;
    return camera
  }
  
  function updateCamera(camera) {
    const { aspect } = windowDimensions()
    const { caps, sides } = cameraDimensions(aspect)
    camera.left = -sides,
    camera.right = sides,
    camera.top = caps,
    camera.bottom = -caps,
    camera.updateProjectionMatrix();
  }</code></pre>
  </div>
  </div>
  </p>