Then when you get to the interactive mode after the first animation, hit the rightward triangle at the bottom right to switch layouts. When you are in the periodic table layout, move the mouse to rotate it.
What you can notice if you do it just right, is that the planes can go right to the camera.
When I try to achieve this same effect with Three.js, I get strange artefacts, at least last time I tried. Maybe I did something wrong.
I’ll be back to post a codepen comparing CSS rendering with Three.js WebGL…
For now, here’s a screen shot in Firefox to describe what I mean:
For reference, here’s what the table looks like when not coming right at the camera, so you can picture it:
What you notice is that the white line (from the corner of a card) and the transparent content around it come right at the camera, and instead of being clipped, they go off the edge of the view.
This is interesting, and I haven’t been able to replicate this with Three.js yet, at least not with what I’ve tried. I wonder what the trick is…
In principle, for a perspective camera the camera position (distance 0) has no well-defined position on the screen. Edit: or maybe it goes to the center…
Anyway, if you have problems with near plane clipping, make sure that you have set the near plane properly. Either in the camera constructor (easiest) or afterwards (then remember to updateProjectionMatrix() ).
