Geek Answers Handbook

Three.js approaches the width of the objects (ignoring the height)

I have a set of block objects, and I would like to set the perspective camera so that their full width is fully visible (the height will be too large - this is normal, we are going to move up and down).

I saw that there are a number of questions nearby, such as:

Configuring the camera for the visible form Three.js

Three.js - view width

THREE.JS: get the size of the object relative to the position of the camera and the object on the screen

How to install a camera on an object

ThreeJS. How to implement ZoomALL and make sure that this field fills the canvas area?

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

  • I'm not interested in height, only width (they will not be the same - the size will be dynamic, but I can assume that the height will be more than the width)

  • Camera.position.z (or FOV, I think) is unknown, so I'm trying to get the equations around the right way to solve this

(I'm not very good at 3D math. Thanks in advance!)

+1
source share
1 answer

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

Since I knew the overall size of the objects, I was able to simply approach with a suitable distance, changing the camera position several times and seeing what looked best.

My real problem was that the same z position gave different widths compared to screen widths on screens of different sizes - due to different proportions.

So, all I did was split my distance value into camera.aspect. Now the blocks occupy the same proportion of the screen width for all screen sizes :-)

-one
source share

More articles:


All Articles