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

Question

I am newbie to 3D programming, I did started to explore the 3D world from WebGL with Three.JS.

I want to predetermine object size while I change the camera.position.z and object's "Z" position.

For example: i have a cube mesh at size of 100x100x100.

cube = new THREE.Mesh(
        new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),     
        new THREE.MeshFaceMaterial()
    );

and cam with aspect ratio of 1.8311874

camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );

I want to know size (2D width & height) of that cube object on screen when,

camera.position.z = 750;
cube.position.z = 500;

Is there is any way to find it/predetermine it?

Answer 1

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js - Width of view.

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

In your case the camera FOV is 45 degrees, so

vFOV = PI/4. 

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is

height = 2 * tan( PI/8 ) * 200 = 165.69.

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is

fraction = 100 / 165.69 = 0.60.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.