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?

Answer 1

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

Answer 2

For a (perfect) spherical object, it will cover more of the view close up as you need to take the tangent into account ie 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