Three.js zoom to fit width of objects (ignoring height)

Question

I have a set of block objects, and I'd like to set the perspective camera so that their entire width is fully visible (the height will be too big - that's OK, we're going to pan up and down).

I've seen there are a number of questions close to this, such as:

Adjusting camera for visible Three.js shape

Three.js - Width of view

THREE.JS: Get object size with respect to camera and object position on screen

How to Fit Camera to Object

ThreeJS. How to implement ZoomALL and make sure a given box fills the canvas area?

However, none of them seem to quite cover everything I'm looking for:

• I'm not interested in the height, only the width (they won't be the same - the size will be dynamic but I can presume the height will be larger than the width)

• The camera.position.z (or the FOV I guess) is the unknown, so I'm trying to get the equations round the right way to solve that

(I'm not great with 3D maths. Thanks in advance!)

Answer 1

I was able to simplify this problem a lot, in my case...

Since I knew the overall size of the objects, I was able to simply come up with a suitable distance through changing the camera's z position a few times and seeing what looked best.

My real problem was that the same z position gave different widths, relative to the screen width, on different sized screens - due to the different aspect ratios.

So all I did was divide my distance value by camera.aspect. Now the blocks take up the same proportion of the screen's width on all screen sizes :-)