Graphics 3D

How 3D Graphics works

Lets walk through a simple example; drawing single triangle. The Mathics command to do this is

Graphics3D[Polygon[{{0,0,0}, {0,1,1}, {1,0,0}}]]

Here's a live example. If you capture the ajax response there's a <graphics 3d> element in the result:

<graphics3d data="{&quot;viewpoint&quot;: [1.3, -2.4, 2.0], &quot;elements&quot;: [{&quot;coords&quot;: [[[0.0, 0.0, 0.0], null], [[0.0, 1.0, 1.0], null], [[1.0, 0.0, 0.0], null]], &quot;type&quot;: &quot;polygon&quot;, &quot;faceColor&quot;: [1, 1, 1, 1]}], &quot;lighting&quot;: [{&quot;color&quot;: [0.3, 0.2, 0.4], &quot;type&quot;: &quot;Ambient&quot;}, {&quot;color&quot;: [0.8, 0.0, 0.0], &quot;position&quot;: [2.0, 0.0, 2.0], &quot;type&quot;: &quot;Directional&quot;}, {&quot;color&quot;: [0.0, 0.8, 0.0], &quot;position&quot;: [2.0, 2.0, 2.0], &quot;type&quot;: &quot;Directional&quot;}, {&quot;color&quot;: [0.0, 0.0, 0.8], &quot;position&quot;: [0.0, 2.0, 2.0], &quot;type&quot;: &quot;Directional&quot;}], &quot;axes&quot;: {&quot;hasaxes&quot;: [false, false, false], &quot;ticks&quot;: [[[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], [&quot;0.0&quot;, &quot;0.2&quot;, &quot;0.4&quot;, &quot;0.6&quot;, &quot;0.8&quot;, &quot;1.0&quot;]], [[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], [&quot;0.0&quot;, &quot;0.2&quot;, &quot;0.4&quot;, &quot;0.6&quot;, &quot;0.8&quot;, &quot;1.0&quot;]], [[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], [&quot;0.0&quot;, &quot;0.2&quot;, &quot;0.4&quot;, &quot;0.6&quot;, &quot;0.8&quot;, &quot;1.0&quot;]]]}, &quot;extent&quot;: {&quot;zmax&quot;: 1.0, &quot;ymax&quot;: 1.0, &quot;zmin&quot;: 0.0, &quot;xmax&quot;: 1.0, &quot;xmin&quot;: 0.0, &quot;ymin&quot;: 0.0}}" />

It's a bit messy because of all the HTML escaping. What we are interested in is the data field. Here it is unescaped:

{"viewpoint": [1.3, -2.4, 2.0], "elements": [{"coords": [[[0.0, 0.0, 0.0], null], [[0.0, 1.0, 1.0], null], [[1.0, 0.0, 0.0], null]], "type": "polygon", "faceColor": [1, 1, 1, 1]}], "lighting": [{"color": [0.3, 0.2, 0.4], "type": "Ambient"}, {"color": [0.8, 0.0, 0.0], "position": [2.0, 0.0, 2.0], "type": "Directional"}, {"color": [0.0, 0.8, 0.0], "position": [2.0, 2.0, 2.0], "type": "Directional"}, {"color": [0.0, 0.0, 0.8], "position": [0.0, 2.0, 2.0], "type": "Directional"}], "axes": {"hasaxes": [false, false, false], "ticks": [[[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"]], [[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"]], [[0.0, 0.2, 0.4, 0.6000000000000001, 0.8, 1.0], [0.05, 0.1, 0.15000000000000002, 0.25, 0.30000000000000004, 0.35000000000000003, 0.45, 0.5, 0.55, 0.65, 0.7000000000000001, 0.75, 0.8500000000000001, 0.9, 0.9500000000000001], ["0.0", "0.2", "0.4", "0.6", "0.8", "1.0"]]]}, "extent": {"zmax": 1.0, "ymax": 1.0, "zmin": 0.0, "xmax": 1.0, "xmin": 0.0, "ymin": 0.0}}

It's a json dict describing the graphics in terms of graphics primitives.

If you look in mathics/web/media/js/mathics.js, you'll see that it finds the graphics3d tag and calls drawGraphics3D on the data. The drawGraphics3D function is in mathics/web/media/js/graphics3d.js and uses Three.js (bundled in mathics/web/media/js/three/three.js) to construct the div.