three.js - 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?

score 38 · Accepted Answer

您可以使用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

在您的情况下，相机 FOV 是 45 度，所以

vFOV = PI/4.

（注意：在 three.js 中，相机视野 FOV 是垂直的，而不是水平的。）

从相机到立方体正面的距离（重要！）是 750 - 500 - 50 = 200。因此，在您的情况下，可见高度是

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

由于立方体的正面是 100 x 100，所以立方体表示的可见高度的分数是

fraction = 100 / 165.69 = 0.60.

因此，如果您知道画布高度（以像素为单位），那么立方体的高度（以像素为单位）就是该值的 0.60 倍。

我提供的链接显示了如何计算可见宽度，因此如果需要，您可以以类似的方式进行计算。

1 回答 1