Threejs Fit plane to screen

gistfile1.js

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

let dist = camera.position.z - mesh.position.z;
let height = ... // desired height to fit
camera.fov = 2 * Math.atan(height / (2 * dist)) * (180 / Math.PI);
camera.updateProjectionMatrix();


// Basically solving an AAS triangle https://www.mathsisfun.com/algebra/trig-solving-aas-triangles.html
https://i.stack.imgur.com/PgSn3.jpg

Thanks!

Great, thank you!

Excellent, merci! 🌟

Merci chouchou <3

here is another approach, changing the position and rotation of the plane to always fit the screen.

  const fitPlaneToScreen = (planeMesh, planeHeight) => {
    let aspect = window.innerHeight / window.innerWidth;
    if( aspect < 1.0 ) {
      planeHeight *= aspect;
    }
    let distance = planeHeight * 0.5 / Math.tan( camera.fov * 0.5 * (Math.PI/180) );
    let cameraDir = new THREE.Vector3();
    camera.getWorldDirection( cameraDir );
    planeMesh.position.set( camera.position.x, camera.position.y, camera.position.z );
    planeMesh.position.add( cameraDir.multiplyScalar( distance ) );
    planeMesh.rotation.setFromRotationMatrix( camera.matrix );
  }

pass in the plane mesh and the height of the plane mesh geometry when it was created.