Three.js: Berechnung des Sichtfelds für die Perspektivkamera

Das sichtbare height gegebenem vertikalen Sichtfeld vFOV und Abstand von der Kamera dist ist

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

Das sichtbare width ist

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

Der Sichtfeldparameter für die Kamera in THREE.js ist der vertikale.

Verwenden Sie die beiden Gleichungssätze, um das erforderliche vFOV zweimal zu berechnen, und wählen Sie die größere Antwort aus.

Vielen Dank für die Antwort :)
Ich bin allerdings etwas verwirrt. Woher bekomme ich die Variable vFOV?
Ist es die Höhe des Objekts, die die Szene füllen soll?
Wenn ja, bekomme ich seltsame Zahlen (im Bereich von 1000). Wie übersetze ich das in das spätere Sichtfeld?

Ich habe eine Geige erstellt http://jsfiddle.net/dmYgr/6/
Können Sie mir dort zeigen, wie das geht?

Nochmals vielen Dank. An deinem Beitrag kann ich schon spüren, dass du mehr ein Genie bist als ich;)

Verwenden Sie die erste Gleichung und lösen Sie nach vFOV . Verwenden Sie diese dann als fov -Parameter für die Kamera.

Meine Szene ist 800 * 600.
Der Abstand der Kamera beträgt 1000.

Wie verwende ich diese Zahlen in Ihrer Formel?
Ich weiß nicht, was ich in vFOV eintragen soll.

Höhe = 2 * Math.tan ((vFOV / 2)) * dist; <- Sie sagen mir, ich soll hier anfangen, aber welche Nummer sollte vFOV ersetzen?

Verwenden Sie die erste Gleichung und lösen Sie wie folgt nach vFOV

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

Verwenden Sie dies dann als fov -Parameter für die Kamera.

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;

Ergebnis:
vFOV = 0,7610127542247298, was kein gültiges FOV ist

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, was ebenfalls kein gültiges FOV ist

Können Sie das Beispiel für mich ausfüllen und ein Beispiel zeigen, das eine gültige FOV-Nummer enthält?
Die korrekte Nummer des obigen Beispiels liegt bei 37

In deiner Geige,

Höhe = Höhe Ihres Flugzeugnetzes = 500.

Entfernung = Kamera.z - Ebene.z = 1000 - 100 = 900.

vFOV = 2 * Math.atan (Höhe / (2 * Abstand)) = 0,5419 Bogenmaß oder 31,04 Grad.

2 * Math.atan (500 / (2 * 900)) = 0,5418937006768411 laut meinem Browser (Google Chrome)

Entschuldigung, ich habe es versäumt, die Umrechnung von Bogenmaß in Grad anzuzeigen. Ich habe meinen vorherigen Beitrag aktualisiert.

Ich danke dir sehr! : D.
Hah, es hat ungefähr 10 Antworten gedauert, aber es funktioniert jetzt :).
Danke noch einmal!

@Tobiasartz :-)

West Langley. Du bist ein König. Vielen Dank.

Das war super hilfreich !! Danke @WestLangley !

Vielen Dank, dass Sie @WestLangley !
Da ich eine Weile gebraucht habe, um zu erkennen, dass ich eine Umrechnung von Strahlungsmitteln in Grad hinzufügen musste, füge ich hier ein Beispiel mit dem endgültigen Code hinzu:

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 Deine Formel macht keinen Sinn. window.innerHeight hat Pixeleinheiten. distance wahrscheinlich nicht. Die sichtbare Höhe muss die gleichen Einheiten wie der Abstand haben.

Ich habe Tobiasartz 'Geige mit dieser Formel aktualisiert und es scheint zu funktionieren:
http://jsfiddle.net/dmYgr/63/
Die Leinwand ist 500px groß, die Ebene ist 495x495 und es gibt ungefähr 5px Rand um sie herum.
Warum ist 1000px keine gültige Entfernung?

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

Warum ist 1000px keine gültige Entfernung?

Haben Sie jemals eine Kamera mit 1000 Pixel vor Ihrem Motiv platziert?

Sie können eine echte Kamera 10 Fuß entfernt platzieren, um eine 10 Fuß breite Szene zu betrachten. Ebenso können Sie eine virtuelle Kamera 1000px entfernt platzieren, um eine 1000px breite Szene anzuzeigen.

Ich benutze dies, wenn ich die Höhe, Breite der Szene und Entfernung der Kamera kenne ...

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;

Auf diese Weise werden auch Situationen wie Höhe> Breite behandelt ...