Hacker News Reader

Comment by Theodores | Hacker News Reader

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.

View on HN

Fun fact: three.js has an SVG renderer! 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.

I 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

Did your approach require JS or were you able to do the rotating part completely in CSS and SVG?

Now 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...

It's possible to have simple animation only in SVG but you can add CSS to have complex ones.

Reply on news.ycombinator.com