three.js - sphere - three js texture

THREE.JS: obtenga el tamaño del objeto con respecto a la posición de la cámara y el objeto en la pantalla

Question

Soy novato de la programación en 3D, empecé a explorar el mundo 3D desde WebGL con Three.JS.

Quiero predeterminar el tamaño del objeto mientras cambio la cámara.position.z y la posición "Z" del objeto.

Por ejemplo: tengo una malla de cubo con un tamaño de 100x100x100.

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

y cámara con una relación de aspecto de 1.8311874

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

Quiero saber el tamaño (ancho y alto 2D) de ese objeto de cubo en la pantalla cuando,

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

¿Hay alguna forma de encontrarlo / predeterminarlo?

Answer 1

Puede calcular la altura visible para una distancia dada desde la cámara utilizando las fórmulas explicadas en Three.js - Ancho de vista .

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

En su caso, la cámara FOV es de 45 grados, por lo que

vFOV = PI/4.

(Nota: en three.js, el FOV de campo de la cámara es el vertical , no el horizontal).

La distancia desde la cámara a la cara frontal (¡importante!) Del cubo es 750 - 500 - 50 = 200. Por lo tanto, la altura visible en su caja es

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

Como la cara frontal del cubo es 100 x 100, la fracción de la altura visible representada por el cubo es

fraction = 100 / 165.69 = 0.60.

Entonces, si conoce la altura del lienzo en píxeles, entonces la altura del cubo en píxeles es 0,60 veces ese valor.

El enlace que proporcioné muestra cómo calcular el ancho visible, por lo que puede hacer ese cálculo de manera similar si lo necesita.