Can Three Camera render objects at near plane 0?

When you try to make a scene with near plane 0 on the camera, rendering breaks.

However, in CSS 3D, objects seem to be renderable very very close to the camera without any artefacts.

For example, in Firefox, you can try

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:

40 AM

For reference, here’s what the table looks like when not coming right at the camera, so you can picture it:

16 AM

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…

Codepen coming up… (edit: if I get some time)

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() ).