javascript - Conversia valorii câmpului vizual la valoarea perspectivei CSS3D

Dacă aș dori să am o cameră, cu un câmp vizual de 60°, atunci cum se calculează valoarea perspectivei în CSS3D?

perspective: ?;
perspective-origin: center center;

Am găsit o descriere despre cum să calculezi matricea de proiecție pornind de la valoarea de perspectivă, dar încă nu o înțeleg prea bine: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Deci dacă am un Câmp de Vizualizare dat și cunosc offsetWidth/offsetHeight al elementului, atunci cum ar trebui să calculez valoarea de perspectivă necesară?

Și unde sunt planul apropiat și planul îndepărtat?

Răspuns #1

Am pus o întrebare similară acum câțiva ani și am primit răspunsul de mai jos. Articolul la care se face referire s-a schimbat între timp, așa că citez textul deoarece nu mai există în articol (dar pot exista încă alte informații utile).

Dacă citesc corect, ai o piramidă cu baza la [perspective px] distanță de privitor. Deci dacă vrei un câmp vizual de 60°, ai un triunghi de 30° de la centru până la colțuri și trebuie să găsești lungimea laturii adiacente:

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

Cred că ;) Oferă o perspectivă de 968 pentru o vizualizare de 1000x500, ceea ce pare corect după ce m-am jucat aleatoriu destul de mult cu -webkit-perspective

Proiectul de lucru al Modulului CSS 3D Transforms oferă următoarea explicație:

perspectivă(<număr>)

specifică o matrice de proiecție perspective. Această matrice mapează un cub de vizualizare pe o piramidă a cărei bază este la o distanță infinită de privitor și vârful căreia reprezintă poziția privitorului. Zona vizibilă este regiunea delimitată de cele patru margini ale ferestrei de vizualizare (porțiunea din fereastra browserului utilizată pentru redarea paginii web între poziția privitorului și un punct aflat la o distanță infinită de privitor). Adâncimea, dată ca parametru funcției, reprezintă distanța planului z=0 față de privitor. Valorile mai mici dau o piramidă mai aplatizată și, prin urmare, un efect de perspectivă mai pronunțat. Valoarea este dată în pixeli, așa că o valoare de 1000 oferă o cantitate moderată de comprimare și o valoare de 200 oferă o cantitate extremă. Matricea este calculată începând cu o matrice identitate și înlocuind valoarea de la rândul 3, coloana 4 cu valoarea -1/adâncime. Valoarea pentru adâncime trebuie să fie mai mare decât zero, altfel funcția este invalidă.