javascript - A látómező értékének átalakítása CSS3D perspektíva értékre

Ha szeretnék egy kamerát 60°-os látószöggel, akkor hogyan kell kiszámítani a CSS3D perspektíva értékét?

perspective: ?;
perspective-origin: center center;

Találtam egy leírást arról, hogyan kell kiszámítani a kirajzolási mátrixot perspektíva értékből, de még mindig nem igazán értem: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Tehát ha van egy adott látómezőm, és ismerem az elem offsetWidth/offsetHeight értékét, akkor hogyan kellene kiszámolnom a szükséges perspektíva értéket?

És hol van a közeli sík és a távoli sík?

Válasz #1

Néhány évvel ezelőtt egy hasonló kérdést tettem fel, és az alábbi választ kaptam. A hivatkozott cikk azóta megváltozott, ezért idézem a szöveget, mivel már nem található meg a cikkben (de lehet, hogy más hasznos információ még mindig van).

Ha jól olvasom, van egy piramisod, amelynek alapja [perspective px]-re van a nézőtől. Tehát ha 60°-os látómezőt akarsz, van egy 30°-os háromszög a középponttól a sarkokig, és meg kell találnod a szomszédos él hosszát:

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

Azt hiszem ;) Ez egy 968 perspektívát ad egy 1000x500 nézethez, ami elég jónak tűnik, miután eléggé játszottam véletlenszerűen a -webkit-perspective-tel

A CSS 3D Transforms modul munkapéldánya a következő magyarázatot adja:

perspektíva(<szám>)

megad egy perspektivikus vetítési mátrixot. Ez a mátrix egy nézőkockát vetít egy piramisra, amelynek alapja végtelen távolságra van a nézőtől, és csúcsa a néző pozícióját képviseli. A látható terület az a régió, amelyet a nézőablak négy éle határol (a böngészőablak azon része, amelyet az oldal renderelésére használnak a néző pozíciója és a nézőtől végtelen távolságra fekvő pont között). A mélység, amelyet a függvény paramétereként adnak meg, a z=0 sík távolságát jelenti a nézőtől. Az alacsonyabb értékek laposabb piramist eredményeznek, ezáltal hangsúlyosabb perspektívahatást. Az értéket pixelekben adjuk meg, így a 1000-es érték mérsékelt rövidülést, míg a 200-as érték extrém mértékűt biztosít. A mátrixot úgy számítjuk ki, hogy egy egységmátrixból indulunk, és a 3. sor 4. oszlopában lévő értéket -1/mélység értékre cseréljük. A mélység értékének nagyobbnak kell lennie nullánál, különben a függvény érvénytelen.