Comment by graypegg
14 hours ago
Nitpick, but elevation would make much more sense if you assumed a base plane + set a perspective, and then translate3d'd upwards on the Z axis. It would grow the size of the element as well.
Saying that, probably annoying to work with transformed DOM nodes, but the background being the only thing moving in the "bounce" example just stood out to me as weird.
Also, the texures seem to be just gradients or embedded texture data. Was thinking this would use https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... and fall back to gradients/premade images for firefox.
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.
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.
1 reply →