1

I want to create a plane with the exact dimensions to fill the browser window.

How can this be done while using a perspective camera?

Using an isometric camera, I think this is pretty simple since I can set the plane's width and height to the window.innerWidth & window.innerHeight values.

Using a perspective camera, I need some equation to go between the desired width (window.innerWidth) and the width assigned to the plane - since perspective will effect it.

Maybe there are some equations I'm not aware of that relate "rendered" size to an objects actual size, distance from the camera, and camera's field of view?

What I've tried:

@westlangley's answer here:

// Convert the field of view to radians 
var vFOV = camera.fov * Math.PI / 180;

// Get the visible height 
var height = 2 * Math.tan( vFOV / 2 ) * distanceOfPlaneFromCamera;

// If we want a width that follows the aspect ratio of the camera, then get the aspect ratio and multiply by the height.
var aspect = window.innerWidth / window.innerHeight;
var width = height * aspect;

With a field of view = 90, and a distanceOfPlaneFromCamera = 55, the result for height = 109.9999.

I'm not sure what "unit" that value is describing. How would I go from that # to sizing a plane so it fills my screen?

Community
  • 1
  • 1
Don P
  • 60,113
  • 114
  • 300
  • 432
  • See https://stackoverflow.com/questions/13350875/three-js-width-of-view/13351534#13351534 – WestLangley Aug 11 '17 at 23:52
  • Thanks @westlangley - I tried out your code, but I'm not sure what to do with the result values of height & width. They don't seem to be in pixels, and I'm not sure how to use them to size a plane so it fills my screen at a particular distance. – Don P Aug 12 '17 at 22:00
  • I think I understand what you're doing with using Math.tan(angle) to get the total viewable height at a certain distance "out". But given a result of 109.99, if I create a plane of height 55 (from y=0 to y=55), I'd expect it to fill half the screen. – Don P Aug 12 '17 at 22:07
  • Distances are in world units -- whatever you declare them to be. http://jsfiddle.net/43ckm8as/ – WestLangley Aug 12 '17 at 22:43

0 Answers0