Three.js JavaScript WebGL Renderer

A web-based interactive viewer using the Three.js JavaScript library maintained by

The viewer is invoked by adding the keyword argument viewer='threejs' to the command show() or any three-dimensional graphic. The scene is rendered and displayed in the users’s web browser. Interactivity includes

  • Zooming in or out with the mouse wheel or pinching on a touch pad
  • Rotation by clicking and dragging with the mouse or swiping on a touch pad
  • Panning by right-clicking and dragging with the mouse or swiping with three fingers on a touch pad

The generated HTML file contains all data for the scene apart from the JavaScript library and can be saved to disk for sharing or embedding in a web page. The option online can be set to true to provide links to the required files in an online content delivery network. Alternately the required files can be downloaded from the Three.js GitHub repository and linked directly from the web server.

Options currently supported by the viewer:

  • aspect_ratio – (default: [1,1,1]) list or tuple of three numeric values; \(z\)-aspect is automatically reduced when large but can be overridden
  • axes – (default: False) Boolean determining whether coordinate axes are drawn
  • axes_labels – (default: [‘x’,’y’,’z’]) list or tuple of three strings; set to False to remove all labels
  • color – (default: ‘blue’) color of the 3D object
  • decimals – (default: 2) integer determining decimals displayed in labels
  • frame – (default: True) Boolean determining whether frame is drawn
  • online – (default: False) Boolean determining whether the local standard package files are replaced by links to an online content delivery network
  • opacity – (default: 1) numeric value for transparency of lines and surfaces
  • projection – (default: ‘perspective’) the type of camera projection to use; ‘perspective’ or ‘orthographic’
  • radius – (default: None) numeric value for radius of lines; use to render lines thicker than available using thickness or on Windows platforms where thickness is ignored
  • render_order – (default: 0) numeric value for rendering order of transparent surfaces; objects render from lowest to highest value ensuring that lower-valued objects render completely
  • single_side – (default: False) Boolean determining whether both sides of a surface material are rendered; set to True to reduce rendering artifacts for closed transparent surfaces
  • thickness – (default: 1) numeric value for thickness of lines

Clicking on the information icon in the lower right-hand corner of the viewer opens a menu of available actions. These include saving the three-dimensional scene as a static PNG image or as complete HTML source code.


  • Paul Masson (2016): Initial version


Three spheres of different color and opacity:

sage: p1 = sphere(color='red', opacity='.5')
sage: p2 = sphere((-1,-1,1), color='cyan', opacity='.3')
sage: p3 = sphere((1,-1,-1), color='yellow', opacity='.7')
sage: show(p1 + p2 + p3, viewer='threejs')

A parametric helix:

sage: parametric_plot3d([cos(x),sin(x),x/10], (x,0,4*pi), color='red', viewer='threejs')
Graphics3d Object