THREE.JS: получить размер объекта относительно положения камеры и объекта на экране

Я новичок в 3D-программировании, я начал изучать 3D-мир из WebGL с помощью Three.JS.

Я хочу предопределить размер объекта, пока я изменяю position.z. камеры и объекта "Z".

Например: У меня есть кубическая сетка размером 100x100x100.

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

и кулачок с соотношением сторон 1.8311874

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

Я хочу знать размер (двумерную ширину и высоту) этого объекта куба на экране, когда

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

Есть ли способ найти его/предопределить?

Ответы

Ответ 1

Вы можете вычислить видимую высоту для заданного расстояния от камеры, используя формулы, объясненные в Three.js - Ширина представления.

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.

(Примечание: в трёхмерном поле зрения поле зрения камеры является вертикальным, а не горизонтальным.)

Расстояние от камеры до передней поверхности (важно!) куба составляет 750 - 500 - 50 = 200. Поэтому видимая высота в вашем случае

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

Поскольку передняя грань куба 100 х 100, доля видимой высоты, представленная кубом, равна

fraction = 100 / 165.69 = 0.60.

Итак, если вы знаете высоту холста в пикселях, высота куба в пикселях в 0,60 раза больше этого значения.

Указанная ссылка показывает, как вычислить видимую ширину, поэтому вы можете сделать это вычисление аналогичным образом, если вам это нужно.