Three.js: Calcul du FOV pour la caméra Perspective

Le height visible étant donné le champ de vision vertical vFOV et la distance de la caméra dist est

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

Le width visible est

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

Le paramètre de champ de vision de la caméra dans THREE.js est le paramètre vertical.

Utilisez les deux ensembles d'équations pour calculer le vFOV requis deux fois et sélectionnez la réponse la plus grande.

Merci beaucoup d'avoir répondu :)
Je suis un peu confus. D'où puis-je obtenir la variable vFOV?
Est-ce la hauteur de l'objet qui devrait remplir la scène?
Si c'est le cas, j'obtiens des nombres étranges (dans la gamme 1000) alors comment puis-je traduire cela en champ de vision final.

J'ai créé un violon http://jsfiddle.net/dmYgr/6/
Pouvez-vous me montrer comment faire cela?

Encore merci beaucoup. D'après votre message, je peux déjà sentir que vous êtes plus un génie que moi;)

Utilisez la première équation et résolvez pour vFOV , puis utilisez-la comme paramètre fov pour la caméra.

Ma scène est 800 * 600.
La distance de la caméra est de 1000.

Comment utiliser ces nombres dans votre formule.
Je ne sais pas quoi remplir dans vFOV.

hauteur = 2 * Math.tan ((vFOV / 2)) * dist; <- Vous me dites de commencer ici, mais quel numéro devrait remplacer vFOV?

Utilisez la première équation et résolvez pour vFOV comme ceci

vFOV = 2 * Math.atan( height / ( 2 * distance ) );

puis utilisez-le comme paramètre fov pour la caméra.

var renderWidth = 800;
var renderHeight = 600;
var cameraPosition = 1000;

var vFOV = 2 * Math.atan( renderWidth / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;
var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

Résultat:
vFOV = 0.7610127542247298 qui n'est pas un FOV valide

var vFOV = 2 * Math.atan( renderHeight / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;

var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

vFOV = 0,5829135889557342 qui n'est pas non plus un FOV valide

Pouvez-vous remplir l'exemple pour moi et montrer un exemple qui donne un numéro FOV valide?
Le numéro correct de l'exemple ci-dessus est quelque part autour de 37

Dans ton violon,

height = hauteur de votre maille plane = 500.

distance = camera.z - plane.z = 1000 - 100 = 900.

vFOV = 2 * Math.atan (hauteur / (2 * distance)) = 0,5419 radians, ou 31,04 degrés.

2 * Math.atan (500 / (2 * 900)) = 0.5418937006768411 selon mon navigateur (google chrome)

Désolé, j'ai négligé de montrer la conversion des radians en degrés. J'ai mis à jour mon précédent post.

Merci beaucoup! :RÉ
Hah, il a fallu 10 réponses mais ça marche maintenant :).
Merci encore!

@Tobiasartz :-)

West Langley. Tu es un roi. Je vous remercie.

C'était super utile !! Merci @WestLangley !

Merci @WestLangley !!
Comme il m'a fallu un certain temps pour réaliser que je devais ajouter une conversion des radiants en degrés, j'ajoute ici un exemple avec le code final:

var distance = 1000;
var FOV = 2 * Math.atan( window.innerHeight / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

@ Emanuele-Spatola Votre formule n'a pas de sens. window.innerHeight a des unités de pixels. distance ne le fait probablement pas. La hauteur visible doit avoir les mêmes unités que la distance.

J'ai mis à jour le violon de Tobiasartz avec cette formule et cela semble fonctionner:
http://jsfiddle.net/dmYgr/63/
La toile mesure 500 pixels, l'avion mesure 495 x 495 et il y a environ 5 pixels de bordure autour.
Pourquoi 1000px n'est-il pas une distance valide?

http://jsfiddle.net/dmYgr/65/

Pourquoi 1000px n'est-il pas une distance valide?

Avez-vous déjà placé un appareil photo à 1000 pixels devant votre sujet?

Vous pouvez placer une vraie caméra à 10 pieds de distance pour regarder une scène de 10 pieds de large. De même, vous pouvez placer une caméra virtuelle à 1000px pour voir une scène de 1000px de large.

J'utilise ceci quand je connais la hauteur, la largeur de la scène et la distance de la caméra ...

var distance = 1000,height=window.innerHeight,width=window.innerWidth
var diag = Math.sqrt((height*height)+(width*width))
var FOV = 2 * Math.atan( diag / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

De cette façon, des situations comme la hauteur> la largeur sont également gérées ...