Three.js - Width of view

javascript three.js
Leprosy picture Leprosy · Nov 12, 2012 · Viewed 14.9k times · Source

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

WestLangley picture WestLangley · Nov 12, 2012

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

Related questions

"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More
Rotate camera in Three.js with mouse

I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, …

Read More
How to rotate a 3D object on axis three.js?

I have a great problem about the rotation in three.js I want to rotate my 3D cube in one of my game. //init geometry = new THREE.CubeGeometry grid, grid, grid material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:…

Read More