Finally some 3D elements

I've always wanted to include something 3D, something created with Blender into my web design. The first thought was always the SP Logo in some shape or form. It's been some time since I've created a 3D version of the SP logo in Blender (as you can see in the lab) so it was never because I didn't have the asset but more about what is the proper way to include it.

My first thought was always to do something with Three.js, but including a whole Javascript library just for something so small seemed overkill. The next obvious way would be to include an animated gif, well those are so 90s and I think also limited and probably too large in size. So I stumbled upon a third possibility, the sprite way.

Let's explain, the idea is two have one image, with all the different frames of the animation in one row, and then just move through them by CSS animation. It's kinda like a projector and an old film roll.

So all I had to do was create individual stills from the whole animation in Blender (export as an image sequence) and then use a website like Images to Sprite Sheet Generator and voila, a nice smooth 3D animation based only on a single image and some CSS Animation.

I'd love to include the animation within this blog post for future reference, but I can't. But for now (on version 10) you can see it on the right side in desktop mode.

Maybe this is just the first of many 3D elements, who knows.