Aframe/Three fit to screen - calculate zoom

Question

I want to zoom the camera in Three/Aframe so an image fits to screen.

This is the code I'm using:

    this._camera = document.getElementById('camera').getAttribute('camera')
    this._ratio = this._assetWidth/this._assetHeight

    this._vFOV = window.THREE.Math.degToRad( this._camera?.fov || 80 )

    this._height = 2 * Math.tan( this._vFOV / 2 ) * this.data.distance
    this._width = this._height * this._ratio

    this._zoom = this._ratio > 1 ? this._width/window.innerWidth : this._height/window.innerHeight

    console.log(this._zoom,  this._ratio, this._width, window.innerWidth)

I've got to the part where I need to calculate Zoom so that the object fits to the screen, i.e. if it's landscape fits to width, if it's portrait fit to height.

I thought this was the answer but it's not. that's to calculate the camera position rather than zoom value.

I'm stuck on how you work out the zoom value.

Any clues?

Piotr Adam Milewski · Accepted Answer · 2021-02-26T11:04:15.543

Fitting an object to the screen by:

changing the camera FoV
zooming the camera
repositioning the camera / object

is quite similar once you understand where the formulas came from.
We'll use this neat image (from this SO thread) as it covers all three topics:

0. What do we want to achieve

We want the object (the longer side of either its width or height) to cover the filmHeight - so it fits the screen.

1. Recalculating the FoV

In this case we do know the focalLength (camera distance from the object) and filmHeight (object width or height). We can calculate fov / 2 thanks to our friend trigonometry:

Tan (fov / 2) = (filmHeight / 2) / focalLength
=> fov = 2 * ATan ((filmHeight / 2)) / focalLength * 180 / PI

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("fit", {
    init: function() {
      const plane = document.querySelector("a-plane")
      const distance = this.el.object3D.position.distanceTo(plane.object3D.position)
      var height = plane.getAttribute("geometry").height
      var newFov = 2 * Math.atan((height / 2) / distance) * (180 / Math.PI); // in degrees
      this.el.sceneEl.camera.fov = newFov
    }
  })
</script>
<a-scene>
  <a-plane position="0 1.6 -2" material="src: https://i.imgur.com/wjobVTN.jpg"></a-plane>
  <a-camera position="0 1.6 0" fit></a-camera>
</a-scene>

2. Repositioning the object / camera

Same triangle different variables. Now we want to know the focalLength:
Tan (fov / 2) = (filmHeight / 2) / focalLength
=> focalLength = (filmHeight / 2) / Tan (fov / 2)

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("fit", {
    init: function() {
      const plane = document.querySelector("a-plane")
      const height = plane.getAttribute("geometry").height
      const fov = this.el.sceneEl.camera.fov * (Math.PI / 180);
      const newDistance = Math.abs((height / 2) / Math.tan(fov / 2))
      plane.object3D.position.z = -1 * newDistance;
    }
  })
</script>
<a-scene>
  <a-plane position="0 1.6 -2" material="src: https://i.imgur.com/wjobVTN.jpg"></a-plane>
  <a-camera position="0 1.6 0" fit></a-camera>
</a-scene>

3. Zooming the camera

If we know what distance should the camera be from the object for it to fill the screen - we know what is the relation between the current distance, and the new one:

zoom = currentDistance / necessaryDistance

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("fit", {
    init: function() {
      const plane = document.querySelector("a-plane");
      const distance = this.el.object3D.position.distanceTo(plane.object3D.position);
      const height = plane.getAttribute("geometry").height;
      const fov = this.el.sceneEl.camera.fov * (Math.PI / 180);
      const newDistance = Math.abs((height / 2) / Math.tan(fov / 2));
      this.el.sceneEl.camera.zoom = distance / newDistance;
    }
  })
</script>
<a-scene>
  <a-plane position="0 1.6 -2" material="src: https://i.imgur.com/wjobVTN.jpg"></a-plane>
  <a-camera position="0 1.6 0" fit></a-camera>
</a-scene>

since `a-frame` manages window / canvas resizing, I think there is no need to use the window width / height. At least it seems to work properly when i change a [fiddle](https://jsfiddle.net/kfLaw86h/2/) window size — Piotr Adam Milewski, Feb 26 '21 at 10:59
@beek you accepted the answer without any comment and I was worried it was "meh, good enogh" :D I'm really glad if it helped, actually your question made me look it up and attempt to understand the math behind it. — Piotr Adam Milewski, Mar 01 '21 at 20:30
best answer ever on Stackoverflow! Meant I could see which solution worked best and adjust accordingly! Thanks so much for your help! — beek, Mar 01 '21 at 20:36

Aframe/Three fit to screen - calculate zoom

1 Answers1