Instantly share code, notes, and snippets.

# ayamflow/gist:96a1f554c3f88eef2f9d0024fc42940f

Last active May 15, 2024 12:37
Show Gist options
• Save ayamflow/96a1f554c3f88eef2f9d0024fc42940f to your computer and use it in GitHub Desktop.
Threejs Fit plane to screen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 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

### vlucendo commented Oct 23, 2018

Very handy, I was looking for this 👍

thank you!

### nicoptere commented Jul 18, 2019

thanks poussin ! 🥇

Thank you!

### kevinboudot commented Sep 6, 2019

Merci copain ! <3

Thanks!

### jade-itworkswhy commented Sep 7, 2020

Great, thank you!

### mikatalk commented Oct 10, 2020

Excellent, merci! 🌟

### manudurgoni commented May 15, 2021

Merci chouchou <3

### julapy commented Dec 23, 2022 • edited

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) );