javascript - Convertir el valor del campo de visión a valor de perspectiva CSS3D

Si me gustaría tener una cámara con un campo de visión de 60°, ¿cómo calcular el valor de perspectiva en CSS3D?

perspective: ?;
perspective-origin: center center;

He encontrado una descripción sobre cómo calcular la matriz de proyección a partir del valor de perspectiva, pero todavía no lo entiendo realmente: http://www.w3.org/TR/css-transforms-1/#perspective-matrix-computation

Entonces, si tengo un campo de visión dado, y conozco el offsetWidth/offsetHeight del elemento, ¿cómo debería calcular el valor de perspectiva necesario?

¿Y dónde están el plano cercano y el plano lejano?

Respuesta #1

Hice una pregunta similar hace unos años y recibí la respuesta a continuación. El artículo enlazado ha cambiado desde entonces, así que estoy citando el texto ya que ya no existe en el artículo (pero aún puede haber otra información útil).

Si lo estoy leyendo correctamente, tienes una pirámide con la base a [perspective px] de distancia del espectador. Así que si quieres un campo de visión de 60°, tienes un triángulo de 30° desde el centro hasta las esquinas y necesitas encontrar la longitud del borde adyacente:

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

Creo ;) Proporciona una perspectiva de 968 para una vista de 1000x500, lo cual parece correcto después de haber jugado al azar con -webkit-perspective bastante

El borrador de trabajo del Módulo de Transformaciones 3D de CSS ofrece la siguiente explicación:

perspectiva(<número>)

especifica una matriz de proyección en perspectiva. Esta matriz mapea un cubo de visión sobre una pirámide cuya base está infinitamente lejos del espectador y cuyo vértice representa la posición del espectador. El área visible es la región delimitada por los cuatro bordes del viewport (la porción de la ventana del navegador usada para renderizar la página web entre la posición del espectador y un punto a una distancia infinita del espectador). La profundidad, dada como parámetro de la función, representa la distancia del plano z=0 desde el espectador. Los valores bajos producen una pirámide más aplanada y, por lo tanto, un efecto de perspectiva más pronunciado. El valor se da en píxeles, por lo que un valor de 1000 produce una cantidad moderada de acortamiento y un valor de 200 produce una cantidad extrema. La matriz se calcula comenzando con una matriz identidad y reemplazando el valor en la fila 3, columna 4 con el valor -1/profundidad. El valor de profundidad debe ser mayor que cero; de lo contrario, la función no es válida.