The plot below shows the surface of z = sinc(r), where r = √(x2 + y2). Below the plot are some controls, which show basic manipulation of the surface and mesh. There are also mouseover and click/tap events on the surface/mesh nodes, which may be slow in Internet Explorer.
Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom. Click/tap on the cube icons to snap to a side-on view.
The uniform mesh colour in the textbox above will be parsed as a hex number when you click 'update'. When the mesh colour is set to a uniform constant, there is no way to change particular node colours.
You can see how the plot is constructed in the HTML source (where you can also see the custom colour scale defined, along with some other possibilities there, commented out):
.yarrays are defined in loops,
pushing successively larger values onto the end of each. For aesthetic purposes, I've set the number of nodes in each direction (and the axis extents) to be equal, but it works if you vary either or both independently.
params.data.zobject is in array of length equal to the number of x-values; each entry in the array is itself an array, of length equal to the number of y-values.
clickfunctions each take arguments
i_plot(a requirement because there might be multiple plots on the page),
j(the indices of the grid node), and
d, an object from which you can access any stored data associated with the
(i, j)node via
three_d.hide_mesh(0), etc., where the argument of 0 refers to the index of the plot on the page (since there is only one, it has index 0).
three_d.update_render(0)(the 0 again being the plot index) once the manipulations are finished. The reason here is that re-drawing the scene takes a little time, and you may want to make changes to thousands of elements within the scene.