About the Clover Cube Tutorial
I wrote this tutorial mostly as an excuse to mess around with WebGL.
I didn’t realize I needed step 8 until I was a good part of the way through writing this tutorial. Everytime I played with the thing, the faceplates of my center pieces would pop off and I’d have to guess about which way to put them back on. So whenver I got to step 8, I assumed it was just an illegal position, and physically removed and rotated the center’s faceplate. Eventually I realized it was a legitimate position.
How It Was Made
I started by making a model in blender. I had no previous experience with that tool, so it took some getting used to. The blender stack exchange was helpful, as were a handful of tutorials I found online (and have since lost, so I unfortunately can’t give the authors credit).
I spent a little time thinking of how I could possible model each piece, but it looked painful and I didn’t think I’d be able to get them to line up neatly without a lot of painstaking work.
Maria brilliantly pointed out the pieces of the cube could be described as the intersection of a handful of spheres with a cube, and that worked wonderfully. She even did the math for me (interestingly: the radius of the sphere equals the length of the side of the cube). You can see some screenshots below of that process (#1 – #6). If I were doing it all over again, I’d have chosen a slightly higher resolution for spheres (make them more round) and I would have taken advantage of mirroring a bit more. In either case, I got over the finish line in a few nights of messing with blender.
Once I had the basic model, I got it rendering in the browser, and slowly built up the code base. Each piece of the cube is represented by a darker model that is the shape of the piece, and then 1-3 “stickers” (2d models) that sit very close to the piece, but are seperate models. This was necessary to get multiple colors on each block.
The cube I own (and used for the models) has some obvious imperfections: pieces run into each other when they rotate. I imagine using a slightly different radius would allow for smoother rotations, but I haven’t gotten around to calculating the right number.