Drawing uniform polyhedra with Javascript, WebGL and Three.js

Source on Github


The Wythoff construction is an elegant way of constructing polyhedra from a basic spherical tiling, represented by Schwarz triangles.

Using the construction, combined with some fairly straightforward vector geometry, we can generate 3D models of uniform polyhedra and their derivatives: we use a kaleidoscopic construction to generate the Schwarz triangles and then use trilinear (or maybe triplanar or even trihedral - distance from 3 coincident planes anyway) coordinates within each triangle to determine the polyhedron vertices, with the trilinear coordinates being converted to barycentric (or maybe trihedral or even triplanar - the weighted sum of three points anyway, which I suppose makes them a non-orthogonal basis for ℝ³) for actually generating the points. Vertices for snub polyhedra are found by iterative approximation. We can also use this information to generate duals and stellations as well as using the Schwarz triangle tiling to apply further symmetry operations to basic polyhedra to create compounds.

Using the excellent Three.js Javascript library from Mr.doob, we can do all this with WebGL in real time.



Given a Schwarz triangle, we can move around inside that triangle to create different polyhedra (ie. given a set of mirrors, we can move the vertex point around inside those mirrors). A position within the triangle can be specified with trilinear coordinates representing the relative distance of the point from the three sides eg. (1,1,1) is the central point (perhaps they really should be called triplanar coordinates). We don't have to stay within the triangle though and in fact the point can be anywhere in space (or rather, since we scale vertex points to have length 1, anywhere on the sphere where a sequence of coordinates such as [-1,1,0], [1,1,0], [1,-1,0], [-1,-1,0] corresponds to a great circle route).

We can also show dual figures, and also use inversion to display the original polyhedra, but in a different way:

Sometimes we need a little adjustment of the polyhedron before display, for example, to omit a set of faces or add "hemi" faces through the origin (we cheat a little here and just add a triangle connecting each edge with the origin, rather than adding a proper face).

[2 2 1] doesn't make for a very interesting polyhedron, but we can use it as a symmetry to combine mirror images of other polyhedra. We can use two copies of U69, with "hemi faces" added and certain other sets of faces hidden. The result is the two uniform polyhedra that cannot be made by a "minute variation" of the Wythoff construction (this method of constructing these polyhedra from U69 is described by Zvi Har’El):

A few other examples:

Cubic surfaces

Cubic surfaces (zero loci of degree-3 homogeneous polynomials, to be precise) usually have their natural home in complex projective space, but can be projected down to our familiar real euclidean 3-space. Here we display some as collections of particles (this looks nice and is easier than doing a proper triangulation). The projection is controlled by a basic matrix as well as applying a quaternion rotation for animation. See here for some more details.

Controls here are: z/x: decrease/increase scale, [/]: go slower/faster, c: change color scheme, p: change projection, q: change rotation quaternion, r: reset, s: change surface, t: toggle twirling, <space>: toggle rotation, <up>/<down>: move in & out, ?: toggle info, plus the usual orbit controls with the mouse.

OFF files

We can load files in OFF format (for example, as generated by the excellent Antiprism tools) and display with various embellishments. Compounding is also possible (though may be slow if the OFF file contains many vertices): Some Antiprism examples: And a couple from Roger Kaufman:

Linkages & Dipolygonids

For a polyhedron with all edge lengths equal, we can replace each edge with a hinged pair of brackets that allows the polyhedron to be collapsed like an umbrella (the angle of the bracket is chosen to preserve the angle made at the centre). This is appararently the Hoberman sphere. Makes a nice toy. Some examples of Verheyen's dipolygonid construction - a generalization of Buckminster Fuller's Jitterbug. See this paper


Various other geometric experiments, using the same framework.

Uniform Compounds

Instead of using a set of Schwarz triangles to draw a polyhedron, we can use the triangle sides as a set of mirrors to apply a set of symmetries to another polyhedron - our Schwarz triangle construction gives an axis of symmetry along the z-axis so rotating around that axis gives different alignments. This seems to include the full set of Uniform Compounds enumerated by Skilling, as well as many other combinations where eg. vertex transitivity fails. See George Hart's pages on Compound Polyhedra for more details.


Mouse Controls

Uses Three.js OrbitControls: use mouse click and drag to rotate figure. Mouse wheel to zoom.

Keyboard Controls