Three.js: Menghitung FOV untuk kamera Perspektif

Dibuat pada 2 Feb 2012  ·  19Komentar  ·  Sumber: mrdoob/three.js

Karena saya tidak memiliki pengalaman sebelumnya dengan 3D, saya mengalami beberapa masalah yang mungkin menjadi pengetahuan umum bagi Anda profesional 3D;).
Saya memiliki berbagai macam ukuran pemandangan (800x600, 1200x100 dll.).
Rumus apa yang dapat saya gunakan untuk memastikan bahwa objek dengan posisi az 0 serta lebar dan tinggi yang sama dengan pemandangan memenuhi seluruh pemandangan.

Misalnya: Object Mesh A berukuran 1200x100 dan berada di posisi Z 0. Scene juga berukuran 1200x100. Kamera pada posisi z 1500. Berapakah FOV yang membuat objek memenuhi pemandangan?

Sesuatu di sepanjang garis ((A / B) * C) adalah apa yang saya cari: D.

Jumlah pujian yang tak terbatas untuk siapa pun yang cukup brilian untuk menjawab pertanyaan saya :)

Question

Komentar yang paling membantu

height terlihat berdasarkan bidang pandang vertikal vFOV dan jarak dari kamera dist adalah

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

width adalah

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

Parameter bidang pandang untuk kamera di THREE.js adalah yang vertikal.

Gunakan kedua persamaan untuk menghitung vFOV yang dibutuhkan dua kali, dan pilih jawaban yang lebih besar.

Semua 19 komentar

height terlihat berdasarkan bidang pandang vertikal vFOV dan jarak dari kamera dist adalah

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

width adalah

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

Parameter bidang pandang untuk kamera di THREE.js adalah yang vertikal.

Gunakan kedua persamaan untuk menghitung vFOV yang dibutuhkan dua kali, dan pilih jawaban yang lebih besar.

Terima kasih banyak telah membalas :)
Aku agak bingung. Dari mana saya mendapatkan variabel vFOV?
Apakah ketinggian objek yang seharusnya memenuhi pemandangan?
Jika demikian, saya mendapatkan angka aneh (dalam kisaran 1000) jadi bagaimana cara menerjemahkannya ke FOV akhirnya.

Saya membuat Fiddle http://jsfiddle.net/dmYgr/6/
Dapatkah Anda menunjukkan kepada saya bagaimana melakukan ini?

Agains terima kasih banyak. Dari pos Anda, saya sudah bisa merasakan Anda lebih jenius daripada saya;)

Gunakan persamaan pertama dan selesaikan untuk vFOV , lalu gunakan itu sebagai parameter fov untuk kamera.

Adegan saya 800 * 600.
Jarak kameranya 1000.

Bagaimana cara menggunakan angka-angka ini dalam rumus Anda.
Saya tidak tahu apa yang harus diisi di vFOV.

tinggi = 2 * Math.tan ((vFOV / 2)) * dist; <- Kamu menyuruhku mulai dari sini, tapi nomor berapa yang harus menggantikan vFOV?

Gunakan persamaan pertama dan selesaikan untuk vFOV seperti itu

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

kemudian gunakan itu sebagai parameter fov untuk 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;

Hasil:
vFOV = 0,7610127542247298 yang bukan merupakan FOV yang valid

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 yang juga bukan FOV yang valid

Dapatkah Anda mengisi contoh untuk saya dan menunjukkan contoh yang memberikan nomor FOV yang valid?
Angka yang benar dari contoh di atas adalah sekitar 37

Di biolamu,

tinggi = tinggi jala bidang Anda = 500.

jarak = kamera.z - bidang.z = 1000 - 100 = 900.

vFOV = 2 * Math.atan (tinggi / (2 * jarak)) = 0,5419 radian, atau 31,04 derajat.

2 * Math.atan (500 / (2 * 900)) = 0.5418937006768411 menurut browser saya (google chrome)

Maaf, saya lupa menunjukkan konversi dari radian ke derajat. Saya memperbarui posting saya sebelumnya.

Terima kasih banyak! : D
Hah, butuh 10 balasan tapi sekarang berhasil :).
Terima kasih lagi!

@Tobiasartz :-)

West Langley. Anda adalah seorang raja. Terima kasih.

Ini sangat membantu !! Terima kasih @WestLangley !

Terima kasih @WestLangley !!
Karena saya butuh beberapa saat untuk menyadari bahwa saya perlu menambahkan konversi dari radiasi ke derajat, saya menambahkan di sini contoh dengan kode terakhir:

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 Formula Anda tidak masuk akal. window.innerHeight memiliki satuan piksel. distance kemungkinan besar tidak. Ketinggian yang terlihat harus memiliki satuan yang sama dengan jarak.

Saya memperbarui biola Tobiasartz dengan rumus itu dan tampaknya berhasil:
http://jsfiddle.net/dmYgr/63/
Kanvasnya 500px, bidangnya 495x495 dan ada sekitar 5px perbatasan di sekitarnya.
Mengapa 1000px bukan jarak yang valid?

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

Mengapa 1000px bukan jarak yang valid?

Pernahkah Anda menempatkan kamera 1000 piksel di depan subjek Anda?

Anda dapat menempatkan kamera asli sejauh 10 kaki untuk melihat pemandangan selebar 10 kaki. Demikian pula Anda dapat menempatkan kamera virtual 1000px untuk melihat pemandangan dengan lebar 1000px.

Saya menggunakan ini ketika saya mengetahui tinggi, lebar pemandangan dan jarak kamera ...

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;

Dengan cara ini situasi seperti tinggi> lebar juga dapat ditangani ...

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

yqrashawn picture yqrashawn  ·  3Komentar

danieljack picture danieljack  ·  3Komentar

filharvey picture filharvey  ·  3Komentar

zsitro picture zsitro  ·  3Komentar

fuzihaofzh picture fuzihaofzh  ·  3Komentar