Three.js - Width of view

Question

Is there a way to find out the width of a rendered portion of the scene?

For example, if we have a mesh of width 100, but rendered with a certain level of zoom...how can I calculate the width of the portion of the mesh that is being rendered in the screen?

WestLangley · Accepted Answer · 2020-06-15T14:57:50.257

51

You have to be precise here.

You can calculate the visible rectangular region given the camera's field-of-view, camera.fov, and a given distance, dist, from the camera.

Since the object presumably has depth, you have to pick one plane through the mesh, and do the calculation at that distance.

Here is how to calculate the visible height and width for a given distance dist from the camera.

var vFOV = THREE.MathUtils.degToRad( camera.fov ); // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

var width = height * camera.aspect;           // visible width

three.js r.117

edited Jun 15 '20 at 14:57

answered Nov 12 '12 at 21:03

WestLangley

102,557
10
276
276

Is `dist` a value from FAR value of camera properties? – Feb 05 '14 at 10:28
`dist` must be less than `FAR`, otherwise the location will not be visible. – WestLangley Feb 05 '14 at 13:49
2

trully... I misunderstood, from what does `dist` occur.. Can't see the previous definition of it value in code, describe please, what is the `dist`? Dtis = Far - Near or not? Thanks! – Feb 06 '14 at 07:00
1

`dist` is the distance from the camera. If you need help, please make a new post. Thank you. – WestLangley Feb 06 '14 at 15:03
I have done one question, but it's rather just have a little common with this question, maybe you can help? Here is a link: http://stackoverflow.com/questions/21606513/not-raycasting-but-custom-geometry-casting-in-three-js-intersection thank you! – Feb 06 '14 at 15:09
You can use `camera.aspect` instead of calculating `aspect` yourself. And, for the sake readability, you can compute `vFOV` by doing `THREE.Math.degToRad(camera.fov)`. – XåpplI'-I0llwlg'I - Oct 06 '17 at 08:35
1

@XåpplI'-I0llwlg'I- Thanks. Updated answer. – WestLangley Oct 06 '17 at 15:25
THREE.Math is now THREE.MathUtils – Mike Jun 15 '20 at 12:36
@Mike Thanks! Updated. – WestLangley Jun 15 '20 at 14:58
usually, camera.position.z is dist. – Songwon Park Jul 24 '22 at 12:17

René · Answer 2 · 2019-12-26T06:57:17.270

For a (perfect) spherical object, it will cover more of the view close up as you need to take the tangent into account i.e. you can't see the 'poles'.

Use the following for a spherical object:

// we're using the following triangle: camera - tangent point on sphere - centre of sphere
var targetAngle = 2 * Math.asin(objectRadius / distanceToCamera);

var vFOV = THREE.Math.degToRad(this.fov);

var normalizedHeight = targetAngle / vFOV;

Multiply this with your viewport width to get screen height. For width you need to apply hFOV - see: 90 degree field of view without distortion in THREE.PerspectiveCamera

Three.js - Width of view

2 Answers2

Linked

Related