javascript - Mengonversi nilai Field of View ke nilai perspektif CSS3D

Jika saya ingin memiliki kamera dengan FOV 60°, bagaimana cara menghitung nilai perspektif CSS3D?

perspective: ?;
perspective-origin: center center;

Saya telah menemukan sebuah deskripsi tentang bagaimana cara menghitung matriks proyeksi dari nilai perspektif, tetapi saya masih belum benar-benar memahaminya: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Jadi jika saya memiliki Bidang Pandang tertentu, dan saya tahu offsetWidth/offsetHeight elemen, bagaimana seharusnya saya menghitung nilai perspektif yang dibutuhkan?

Dan di mana bidang dekat dan bidang jauh?

Jawaban #1

Saya mengajukan pertanyaan serupa beberapa tahun yang lalu dan mendapatkan jawaban di bawah ini. Artikel yang terhubung sejak itu telah berubah, jadi saya mengutip teksnya karena tidak lagi ada di artikel tersebut (tetapi mungkin masih ada informasi berguna lainnya).

Jika saya membacanya dengan benar, Anda memiliki sebuah piramida dengan alas berada di [perspective px] dari pandangan. Jadi jika Anda menginginkan fov 60°, Anda memiliki segitiga 30° dari tengah ke sudut dan Anda perlu menemukan panjang sisi yang berdekatan:

Math.pow( w/2*w/2 + h/2*h/2, 0.5 ) / Math.tan( 30 * Math.PI / 180 )

Saya pikir ;) Ini menghasilkan perspektif 968 untuk tampilan 1000x500, yang sepertinya tepat dari pengalaman bermain-main secara acak dengan -webkit-perspective cukup banyak

Draf kerja Modul Transformasi 3D CSS memberikan penjelasan berikut:

perspektif(<number>)

menentukan matriks proyeksi perspektif. Matriks ini memetakan sebuah kubus pandang ke dalam piramida yang alasnya sangat jauh dari pengamat dan puncaknya mewakili posisi pengamat. Area yang dapat dilihat adalah wilayah yang dibatasi oleh empat tepi jendela pandang (bagian dari jendela browser yang digunakan untuk merender halaman web antara posisi pengamat dan titik pada jarak tak hingga dari pengamat). Kedalaman, yang diberikan sebagai parameter pada fungsi, mewakili jarak bidang z=0 dari pengamat. Nilai yang lebih rendah menghasilkan piramida yang lebih datar dan dengan demikian efek perspektif yang lebih menonjol. Nilai diberikan dalam piksel, jadi nilai 1000 memberikan jumlah pemendekan yang sedang dan nilai 200 memberikan jumlah yang ekstrem. Matriks dihitung dengan memulai dari matriks identitas dan mengganti nilai pada baris 3, kolom 4 dengan nilai -1/kedalaman. Nilai untuk kedalaman harus lebih besar dari nol, jika tidak fungsi menjadi tidak valid.