Comment by kikkupico
10 hours ago
Orthographic projection was chosen here deliberately - that's why elevation makes no difference to the size of the object but changes the shadow. Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls. Orthographic projection doesn't need to handle that.
The docs have a page where the lighting and camera setup is explained with an actual threejs 3d scene - https://kikkupico.github.io/ambientcss/guide/concept/#how-it... . Hope it helps!
Regarding the textures, they respond to lighting but not especially well. In the demo app, you can scroll to the materials page and use the theme switcher at the top to see how the texture respond.
>Perspective projection won't work well with scrolling because the angle of the object would have to subtly change when the user scrolls.
That would actually be pretty cool imo. Probably too performance intensive to do with css hacks though
I'm sorry but that's just slop. The elevation in the actual CSS makes the shadow progressively lighter (technically correct, thought the proportions look very wrong, 2 is too dark), while the 3D model has it constant. There is nothing in this 'camera and lighting setup' that was translated to the styles.
The threejs scene in the docs is only for explaining the setup; it doesn't have a raytracer to render shadows accurately. The reference renders for the CSS were done in Blender. See https://kikkupico.github.io/ambientcss/ambient-css/grounded#... for examples.
Some of these seem incredibly far off for no reason