At least for now, there's no natural way to create multiple surfaces on the same plot in three_d.js. But you are allowed to repeat co-ordinates in the mesh grid, so you can make pseudo-multiple surfaces. A toggle to switch on and off the layers is below the plot.

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.

Show all Upper only Lower only

You can see how the plot is constructed in the HTML source:

• The mesh grid is repeated on the x-values. To avoid the mesh joining up the right of the first layer with the left of the second layer, an extra x-value is inserted between the z, with its z-values all being set to null.
• Hiding and showing the layers is done point by point, with three_d.hide_surface_point(), three_d.hide_mesh_point(), three_d.show_surface_point(), and three_d.show_mesh_point(), taking care to pass the appropriate grid indices as arguments.

Posted 2016-12-22.