i hope you're all doing great even though it's probably hot as hell outside!
I am currently working with Three.js' CSS3DRenderer to combine both DOM elements and webGL content. I managed to do everything i wanted but now I'm kinda curious about how this all works.
Here is a link to the source code : CSS3DRenderer
I understand that the principle of the nested div elements (renderer with perpective, camera with worldInverse aka view matrix and objects with model matrix) is to reproduce the matrix product : MVP to obtain div position on canvas from 3D coordinates. Using "perspective" css property applied to children elements and transform-style preserve3D etc.. That's how i understand it. I hope i'm not wrong, please don't hesitate to correct me ^^.
However my questions are regarding the fov computation from the projection matrix of the camera and why it used that way. First line 275 :
var fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
from what i know this element from the projection matrix is the following : (2 * near) / (top - bottom). How does it relate to the fov? and why multiply it by the heightHalf of the rendering domElement?
Furthermore line 294 :
var cameraCSSMatrix = camera.isOrthographicCamera ?
'scale(' + fov + ')' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
it uses the previously calculated fov to apply a scale to the cameraElement if it is orthographic or a translation if it's a perspective camera. I don't get why it is done precisely that whay and i would like to understand it.
Can anybody shed some light on this matter =/ ?
Tank you for reading my post :) and sorry for my bad english.
