Page 1 of 1
3D Planet (3D CSS transforms)
Posted: 06 June 2020, 18:18
by 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
Re: 3D Planet (3D CSS transforms)
Posted: 06 June 2020, 18:36
by tchobello
wow, it looks great !
You may have a look at Taluva or the forthcoming Santorini
Re: 3D Planet (3D CSS transforms)
Posted: 07 June 2020, 01:05
by 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)
Re: 3D Planet (3D CSS transforms)
Posted: 08 June 2020, 02:57
by 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).
Re: 3D Planet (3D CSS transforms)
Posted: 08 June 2020, 10:16
by 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.
Re: 3D Planet (3D CSS transforms)
Posted: 11 June 2020, 13:43
by Idsky
I can easily rotate the whole dodecahedron around it's centre just with CSS transform.
It's 3 DIVs deep,
- tile face (set to any 1 of 5 angles around Z axis)
- segment (translated up to surface of dodecahedron and rotated into position)
- 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!