title: How can I fit THREE.js view to canvas size?
body: <p>I would like to drag and drop element to the mouse position.
  For this I need to &quot;sync&quot; THREE.js space to the canvas size (<code>{0,0}</code> coordinates are at the middle of the screen).
  so let's say my element has a width of 500px if I drop an element with a mouse coordinates <code>x = 500</code> then object x coordinates should be <code>x = 250</code>.
  At this point I am using <code>PerspectiveCamera</code>.</p>
  <p>I relied on the explanation of <a href="https://observablehq.com/@grantcuster/understanding-scale-and-the-three-js-perspective-camera" rel="nofollow noreferrer">this tutorial</a> and made calculation in order to have the fov(field of view) boundaries intersect the boundaries of the green line (in the example circle height, in my case canvas width)</p>
  <p>here is what I've done so far to calculate fov base on z position of the camera (mainly using Pythagore).</p>
  <pre><code>  calculateFOV(z:number){
      const b = z;
      const a = this.width / 2;
      const c = Math.sqrt((a**2) + (b**2));
      const cosa =  a / c;
      let angle = (Math.acos(cosa) * (180 / Math.PI));
      let resAngle = 180 - 90 - angle
      return (resAngle * 2);
    }
  
  ...
  
  const zPosition = 40;
  const fov = this.calculateFOV(zPosition);
  this.camera = new THREE.PerspectiveCamera( fov, this.width / this.height, 10,  zPosition);
  </code></pre>
  <p>but it's not working as expected.</p>
  <p>Please let me know if you need more details.</p>