1^st Example

A Simple Cube

Our first ex­am­ple is a sim­ple, mod­est cube. The first thing we have to do is to de­fine its struc­ture. Ver­tices are de­scribed as a list of co­or­di­nates, with co­or­di­nates as a list of three val­ues. Edges and Faces are lists of in­dices ref­er­enc­ing ver­tices: an edge is a list of two in­dices, ref­er­enc­ing two ver­tices, and a face is a list of ar­bi­trary length, also ref­er­enc­ing ver­tices. In the case of a cube, such lists may look like this:

The next step is to de­fine how the ver­tices, edges and faces of our cube should look like. This in­for­ma­tion is stored in Look-ob­jects, and we pro­vide these ob­jects with the nec­es­sary pa­ram­e­ters: what a ra­dius the balls and tubes rep­re­sent­ing ver­tices and edges should have (using the pa­ram­e­ter ra­dius), how much sub­di­vi­sions we should use to dis­play them (using the pa­ram­e­ter qual­i­ty), whether our faces should be one-sided or dou­ble-sided (using the boolean pa­ram­e­ter dou­bleSid­ed), and which ma­te­ri­al should be used (using the pa­ram­e­ter ma­te­ri­al). If we omit one of these pa­ram­e­ters, a sen­si­ble de­fault will be used. We could use some­thing like this:

Now we have ev­ery­thing in place to call our func­tion and to add the re­sult to our scene:

Pro­vid­ed your brows­er has WebGL-ca­pa­bil­i­ties, the (for di­dac­ti­cal rea­sons rather hor­ri­bly col­ored) re­sult should look like this:

You can ro­tate the cube using your mouse. If no WebGL ca­pa­bil­i­ties are present, Three.js has a fall­back mech­a­nism where it can use an or­di­nary can­vas el­e­ment. My func­tion can work with the Can­vas­Ren­der­er (if you re­place the Mesh­Phong­Ma­te­ri­als above with some­thing the Can­vas­Ren­der­er can un­der­stand), but since the balls and tubes re­quire a lot of in­ter­nal faces, this fall­back so­lu­tion can be re­al­ly slow and un­re­spon­sive, so in most cases it is more ad­vis­able to use a dif­fer­ent fall­back so­lu­tion.

The pa­ram­e­ters used in the code frag­ment above should be pret­ty self-ex­plina­to­ry: we sup­ply the ge­om­e­try data and the de­sired looks for the dif­fer­ent kinds of sub-poly­topes of our poly­he­dron (“sub-poly­topes of a poly­he­dron” is just a fancy way of say­ing “ver­tices, edges and faces”). We could have omit­ted the pa­ram­e­ter edges­Look, in this case, the func­tion would have used the look of the ver­tices as the de­fault for the edges, and the edges would have been col­ored red like the ver­tices, in­stead of yel­low. If we had also omit­ted ver­tices­Look, a light gray look would have been used as the de­fault look for the ver­tices and edges.

In a cer­tain sense, pro­vid­ing the data for the edges our­selves is kind of re­dun­dant, since this data is con­tained in the data for the faces. We can tell the func­tion to com­pute the edges for it­self, so we could also have used this code in­stead with the same re­sult:

As a de­fault, the func­tion dis­plays those sub­poly­topes for which it has data. If we had omit­ted the pa­ram­e­ter faces, it would have dis­played the ver­tices and edges, but no faces. Edges are dis­played per de­fault if they are ei­ther pro­vid­ed, or com­put­ing them from the data of the faces gets re­quest­ed. Some­times, it may not be de­sired to dis­play cer­tain sub­poly­topes (for ex­am­ple, you al­ways have to pro­vide data for the ver­tices, since they are the base for ev­ery­thing else, but you may wish not to dis­play the ver­tices as tiny balls). In this case, the dis­play can be switched on and off with the boolean pa­ram­e­ters showVer­tices, showEdges and show­Faces.

2^nd Example

A Visit From An Octahedron

I’ll show why it may make sense to de­fine edges as their own data struc­ture. Our next ex­am­ple con­tains both a cube and its dual, an oc­ta­he­dron. I want to dis­play them as a com­pound, and since it can be a bit con­fus­ing in a com­pound which ver­tices, edges and faces be­long to which part, they should be dis­tinct­ly col­ored: the cube in blue and the oc­ta­he­dron in or­ange. A straight­for­ward way to do this is to de­fine them as two sep­a­rate ob­jects, like this:

Once again, I could have spared me the def­i­ni­tion of the edges. Any­way, the re­sult looks like this:

But now I want to de­fine the com­pound as a sin­gle ob­ject. I’ll de­fine the ver­tices, edges and faces of both parts of the com­pound share as sin­gle data struc­tures:

But I still want the in­di­vid­u­al parts of the com­pound to have dif­fer­ent col­ors, so I de­fine the cor­re­spond­ing looks:

Now in­stead of defin­ing a sin­gle look, I de­fine ar­rays of pos­si­ble looks via the pa­ram­e­ters ver­tices­Looks, edges­Looks or faces­Looks. And with the pa­ram­e­ters ver­tices­LookMap, edges­LookMap and faces­LookMap, I can de­fine as­so­cia­tive ar­rays which map in­di­vid­u­al poly­topes to in­di­vid­u­al looks, like this:

This re­sults in the same vi­su­al ap­pear­ance of a blue cube and an or­ange oc­ta­he­dron, since it maps in­di­vid­u­al parts to their ac­cord­ing looks.

Once again, we could omit the def­i­ni­tion of the looks for the edges, and the func­tion would take the looks array of the ver­tices in­stead:

Add Comment

Name
Email
Homepage
In reply to	[ Top level ]
Comment	HTML-Tags will be converted to Entities. There are some BBCodes definied. E-Mail addresses will not be displayed and will only be used for E-Mail notifications. To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly. Enter the string from the spam-prevention image above:
	Remember Information? Subscribe to this entry