4 ms·
Recently I wanted to make a rotating 3D pyramid for illustration but without loading a 3D library. I thought how hard can it be in SVG? Very. Backface culling
by Theodores 2y ago
Recently I wanted to make a rotating 3D pyramid for illustration but without loading a 3D library. I thought how hard can it be in SVG?
Very.
Backface culling, a lighting model, a little bit of trigonometry, new CSS color model features and much else took more than two minutes. The result does not have true perspective but looks okay-ish.
This experiment and the trifles made me appreciate three.js so much more!
Props to the creator.
- fallingsquirrel 2y agoFun fact: three.js has an SVG renderer! https://threejs.org/docs/#examples/en/renderers/SVGRenderer https://threejs.org/docs/#examples/en/renderers/SVGRenderer Maybe you could have created the pyramid in 3D and rendered it ahead of time to SVG, so you could end up with a perfect perspective projection.
- itronitron 2y agoDid your approach require JS or were you able to do the rotating part completely in CSS and SVG?
- _ache_ 2y agoIt's possible to have simple animation only in SVG but you can add CSS to have complex ones.
- Theodores 2y agoNow you are teasing me. I did use javascript because of sins and cosines. I think, now I have something, I need to step up to do it entirely in CSS. Another day will be wasted on that... The pyramid also has layers and an initial routine where the layers get added, with a carousel made from details/summary elements to describe the layers. Clicking on the layers opens the respective details/summary and the colour changes. The shading of the pyramid was particularly hard, since that changes as it rotates. I will have to do that in CSS too...
- tomashubelbauer 2y agoI did something similar! Used the `animate` element to move some lines around. A fun project from a few years back: https://github.com/TomasHubelbauer/svg-3d https://github.com/TomasHubelbauer/svg-3d