THREE.JS: Ottieni dimensioni oggetto rispetto alla posizione della fotocamera e dell'oggetto sullo schermo

Question

Sono principiante della programmazione 3D, ho iniziato a esplorare il mondo 3D da WebGL con Three.JS.

Voglio predeterminare la dimensione dell'oggetto mentre cambio camera.position.z e la posizione "Z" dell'oggetto.

Ad esempio: Ho una mesh cubo pari a 100x100x100.

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

e camma con aspect ratio di 1,8311874

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

Voglio sapere dimensioni (2D larghezza & altezza) di tale oggetto cubo su schermo quando,

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

C'è un modo per trovarlo/predeterminarlo?

Answer 1

È possibile calcolare l'altezza visibile per una determinata distanza dalla telecamera utilizzando le formule spiegate 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 

Nel caso la telecamera FOV è di 45 gradi, in modo

vFOV = PI/4. 

(Nota: in Three.js fotocamera campo di vista FOV rappresenta l'verticale uno, non orizzontale .! uno)

la distanza dalla telecamera alla faccia anteriore (importante) del cubo è 750 - 500 - 50 = 200. Pertanto, l'altezza visibile nel tuo caso è

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

Dal momento che la faccia anteriore del cubo è di 100 x 100, la frazione di altezza visibile rappresentato dal cubo è

fraction = 100/165.69 = 0.60. 

Quindi, se si conosce l'altezza di tela in pixel, allora l'altezza della il cubo in pixel è 0,60 volte quel valore.

Il collegamento che ho fornito mostra come calcolare la larghezza visibile, in modo da poter fare quel calcolo in modo simile se ne avete bisogno.