javascript - Convertire il valore del campo visivo in valore della prospettiva CSS3D

Se vorrei avere una fotocamera con un campo visivo di 60°, come si calcola il valore della prospettiva in CSS3D?

perspective: ?;
perspective-origin: center center;

Ho trovato una descrizione su come calcolare la matrice di proiezione a partire dal valore di prospettiva, ma ancora non la capisco davvero: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Quindi, se ho un determinato campo visivo e conosco l'offsetWidth/offsetHeight dell'elemento, come dovrei calcolare il valore di prospettiva necessario?

E dove sono il piano vicino e il piano lontano?

Risposta n. 1

Ho posto una domanda simile qualche anno fa e ho ricevuto la risposta qui sotto. L'articolo collegato è cambiato da allora, quindi sto citando il testo poiché non esiste più nell'articolo (ma potrebbero esserci ancora altre informazioni utili).

Se sto leggendo correttamente, hai una piramide con la base a [perspective px] di distanza dall'osservatore. Quindi, se vuoi un campo visivo di 60°, hai un triangolo di 30° dal centro agli angoli e devi trovare la lunghezza del lato adiacente:

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

Penso ;) Restituisce una prospettiva di 968 per una vista 1000x500, il che sembra giusto dopo aver giocato a caso con -webkit-perspective abbastanza spesso

Il progetto di lavoro del modulo CSS 3D Transforms fornisce la seguente spiegazione:

prospettiva(<numero>)

specifica una matrice di proiezione prospettica. Questa matrice mappa un cubo di visualizzazione su una piramide la cui base è infinitamente lontana dall'osservatore e il cui vertice rappresenta la posizione dell'osservatore. L'area visibile è la regione delimitata dai quattro bordi del viewport (la parte della finestra del browser utilizzata per il rendering della pagina web tra la posizione dell'osservatore e un punto a distanza infinita dall'osservatore). La profondità, indicata come parametro della funzione, rappresenta la distanza del piano z=0 dall'osservatore. Valori più bassi danno una piramide più appiattita e quindi un effetto prospettico più pronunciato. Il valore è espresso in pixel, quindi un valore di 1000 dà una quantità moderata di scorcio e un valore di 200 dà una quantità estrema. La matrice viene calcolata partendo da una matrice identità e sostituendo il valore alla riga 3, colonna 4 con il valore -1/profondità. Il valore della profondità deve essere maggiore di zero, altrimenti la funzione non è valida.