With a frame­work like Three.js, it is pret­ty easy to dis­play the faces of sim­ple poly­he­drons using WebGL. But a poly­he­dron, con­sid­ered less as a phys­i­cal and more as a topo­log­i­cal ob­ject, con­sists not only of its faces. In­stead often its ver­tices and edges are equaly in­ter­est­ing, and it would be nice to have an easy way to dis­play them, per­haps as­sign­ing them dif­fer­ent col­ors, to dis­tin­guish dif­fer­ent kinds of ver­tices or dif­fer­ent kinds of edges. With­in the pro­gram Stel­la, ver­tices can be dis­played as small balls and edges as thin tubes, and I wrote a func­tion to be used in con­junc­tion with Three.js which makes it a bit eas­i­er to con­struct sim­i­lar graph­i­cal ob­jects, fol­low­ing a sim­i­lar vi­su­al style, with­in WebGL.

In the fol­low­ing ex­am­ples, I’ll as­sume that we have set up all the usual Three.js stuff with ren­der­ers and vir­tu­al cam­eras and mouse con­trols and lights and that we have de­fined a Scene-ob­ject. Fur­ther­more, I’ll as­sume that we im­port­ed my helper file JAN3D.js which con­tains the func­tion JAN3D.stel­la() (among other stuff; I also in­clud­ed JAN3D.Tiny­Track­ball­Con­trols). I’ll show, using four ex­am­ples, how to use this func­tion.