javascript - Převést hodnotu zorného pole na hodnotu perspektivy CSS3D

Pokud bych chtěl mít kameru s 60° zorným polem, jak potom spočítat hodnotu perspektivy v CSS3D?

perspective: ?;
perspective-origin: center center;

Našel jsem popis o tom, jak vypočítat projekční matici z hodnoty perspektivy, ale stále tomu úplně nerozumím: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Takže pokud mám dané zorné pole a znám offsetWidth/offsetHeight prvku, jak bych měl vypočítat potřebnou hodnotu perspektivy?

A kde jsou blízká rovina a vzdálená rovina?

Odpověď č. 1

Před několika lety jsem položil podobnou otázku a dostal níže uvedenou odpověď. Odkazovaný článek se od té doby změnil, takže cituji text, protože již v článku neexistuje (ale mohou tam být stále jiné užitečné informace).

Pokud to čtu správně, máte pyramidu se základnou vzdálenou od pozorovatele o [perspective px]. Pokud tedy chcete 60° zorné pole, máte 30° trojúhelník od středu ke rohům a potřebujete najít délku přilehlé hrany:

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

Myslím ;) Poskytuje perspektivu 968 pro pohled 1000x500, což se zdá být přibližně správné poté, co jsem si dost hrál s -webkit-perspective.

Pracovní návrh modulu CSS 3D transformací poskytuje následující vysvětlení:

perspektiva(<číslo>)

určuje matici perspektivní projekce. Tato matice mapuje pozorovací krychli na pyramidu, jejíž základna je nekonečně daleko od pozorovatele a jejíž vrchol představuje pozici pozorovatele. Pozorovatelná oblast je oblast ohraničená čtyřmi hranami viewportu (část okna prohlížeče používaná k vykreslování webové stránky mezi pozicí pozorovatele a bodem v nekonečné vzdálenosti od pozorovatele). Hloubka, uváděná jako parametr funkce, představuje vzdálenost roviny z=0 od pozorovatele. Nižší hodnoty dávají více zploštělou pyramidu a proto výraznější perspektivní efekt. Hodnota je uváděna v pixelech, takže hodnota 1000 dává střední množství zkrácení a hodnota 200 dává extrémní množství. Matice se vypočítá tak, že se začne s jednotkovou maticí a nahradí se hodnota v řádku 3, sloupci 4 hodnotou -1/hloubka. Hodnota hloubky musí být větší než nula, jinak je funkce neplatná.