javascript - Menukar nilai Medan Pandangan kepada nilai perspektif CSS3D
Jika saya ingin mempunyai kamera, dengan FOV 60°, bagaimana untuk mengira nilai perspektif CSS3D?
perspective: ?;
perspective-origin: center center;
Saya telah menemui satu keterangan tentang cara untuk mengira matriks unjuran dari nilai perspektif, tetapi saya masih tidak benar-benar memahaminya: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation
Jadi jika saya mempunyai Medan Pandangan tertentu, dan saya tahu lebar/panjang elemen tersebut (offsetWidth/offsetHeight), bagaimana saya harus mengira nilai perspektif yang diperlukan?
Dan di manakah pesawat dekat dan pesawat jauh?
Jawapan #1
Saya telah menanyakan soalan yang serupa beberapa tahun yang lalu dan mendapat jawapan di bawah. Artikel yang dipautkan telah berubah sejak itu, jadi saya mengutip teks tersebut kerana ia tidak lagi wujud dalam artikel itu (tetapi mungkin masih ada maklumat berguna lain).
Jika saya membacanya dengan betul, anda mempunyai piramid dengan asas pada [perspective px] dari penonton. Jadi jika anda mahu fov 60°, anda mempunyai segitiga 30° dari pusat ke penjuru dan anda perlu mencari panjang tepi bersebelahan:
Math.pow( w/2*w/2 + h/2*h/2, 0.5 ) / Math.tan( 30 * Math.PI / 180 )
Saya rasa ;) Ia menghasilkan perspektif 968 untuk pandangan 1000x500, yang nampaknya tepat berdasarkan pengalaman bermain secara rawak dengan -webkit-perspective sebentar tadi
Draf kerja Modul Transformasi 3D CSS memberikan penjelasan berikut:
perspektif(<number>)
menentukan matriks unjuran perspektif. Matriks ini memetakan kubus paparan kepada sebuah piramid yang asasnya berada pada jarak yang tidak terhingga dari pemerhati dan puncaknya mewakili kedudukan pemerhati. Kawasan yang boleh dilihat ialah kawasan yang dibatasi oleh empat tepi pandangan (bahagian tetingkap pelayar yang digunakan untuk merender laman web antara kedudukan pemerhati dan satu titik pada jarak tidak terhingga dari pemerhati). Kedalaman, yang diberikan sebagai parameter kepada fungsi itu, mewakili jarak pesawat z=0 dari pemerhati. Nilai yang lebih rendah memberikan piramid yang lebih rata dan oleh itu kesan perspektif yang lebih ketara. Nilai diberikan dalam piksel, jadi nilai 1000 memberikan pengurangan jarak sederhana dan nilai 200 memberikan pengurangan jarak yang melampau. Matriks dikira dengan memulakan dengan matriks identiti dan menggantikan nilai di baris 3, lajur 4 dengan nilai -1/ketebalan. Nilai untuk kedalaman mesti lebih besar daripada sifar, jika tidak fungsi ini tidak sah.
