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

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

Я хочу предопределить размер объекта, в то время как я изменяю позицию camera.position.z и объекта «Z».

Например: у меня есть кубическая grid размером 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 ); 

Я хочу знать размер (2D width & height) этого объекта куба на экране, когда,

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

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

Вы можете вычислить видимую высоту для заданного расстояния от камеры, используя формулы, объясненные в разделе 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 gradleусов, поэтому

 vFOV = PI/4. 

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

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

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

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

 fraction = 100 / 165.69 = 0.60. 

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

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

Давайте будем гением компьютера.