3D Planet (3D CSS transforms)

[Idsky]

I've been having fun today with web browser 3D transformations, calculating dihedral angle rotations, circumradius, and apothem Z-axis translations.

I put pentagonal tiles onto a player's 3D dodecahedron for the game Planet (if BGA can get the license from Blue Orange).

I can probably add some shadows and stuff.

This board game is 3D. It will require 3D CSS transforms but according to this site, 98.6% of all current browsers support it!
https://caniuse.com/#feat=transforms3d

[tchobello]

wow, it looks great !

You may have a look at Taluva or the forthcoming Santorini

[Tisaac]

I've added you to the Santorini Player group so that you can have a glance at it.
It's using Three.js as a 3D render engine, which should allow you to do a textured dodecahedron in a glance (the most difficult part is making it work on BGA framework, but I can help you with that).
3D-rendering of BGA (or using css) can look nice but when it comes to rotate the view.... (which is done using OrbitControls in a few lines in Threejs)

[Idsky]

webgl is certainly very cool and surprisingly well supported but for my dodecahedron just some 3D transforms on the tiles do it nicely so I think I'd go with the light-weight approach. I'm keen to work on some of my own favourite games (Quantum — waiting to see if anyone has source graphic files before I give up and scan my copy, and Planet if the publisher allows).

[Tisaac]

Sure, the lightweight approach will render nicely, but if you want to be able to move around the planet to see the different faces, it will probably be a nightmare. You could still re-use the OrbitsControls and hack it into css transform to give the right euler angles, but I'm not sure it's worth the time cost.

[Idsky]

I can easily rotate the whole dodecahedron around it's centre just with CSS transform.

It's 3 DIVs deep,

1. tile face (set to any 1 of 5 angles around Z axis)
2. segment (translated up to surface of dodecahedron and rotated into position)
3. the whole 12-segment shape which can be rotated any which way with mouse / finger drag.

The screenshot was taken at a stylish rotateZ(10deg) rotateY(-19deg) rotateX(31deg) which looked more interesting than a straight vertical 0 0 0. Probably just do X and Y rotation in-game.

No word about Planet yet, but I got the card art for Quantum!