What is the GLViewer Class?

GLViewer, or $3Dmol.GLViewer, is a class in the $3Dmol namespace, that defines a WebGL-based viewer.

There are 2 ways to instantiate a GLViewer instance:

new $3Dmol.GLViewer(element, config) -> $3Dmol.GLViewer
$3Dmol.createViewer(element, config) -> $3Dmol.GLViewer
  element - Specifies the HTML element where the GLViewer is displayed
  config - GLViewer initial properties

Some methods supported on GLViewer instances are listed below:

{$3Dmol.GLViewer} addArrow(spec) - Create and add arrow shape
{$3Dmol.GLViewer} addBox(spec) - Create and add box shape
{$3Dmol.GLViewer} addCurve(spec) - Create and add curve shape
{$3Dmol.GLViewer} addCylinder(spec) - Create and add cylinder shape
{$3Dmol.GLViewer} addLabel(spec) - Create and add text label
{$3Dmol.GLViewer} addLine(spec) - Create and add line shape
{$3Dmol.GLViewer} addModel(data, type, option) - Create and add graphical model
{$3Dmol.GLViewer} addPropertyLabels(prop, sel, style) 
                    - Add property label of the selected atom
{$3Dmol.GLViewer} addResLabels(sel, style, byframe) 
                    - Add residul names to selected protein residuls
{$3Dmol.GLViewer} addShape(spec) - Create and add a given shape
{$3Dmol.GLViewer} addSphere(spec) - Create and add sphere shape
{$3Dmol.GLViewer} addStyle(sel, style) 
                    - Add display style to selected substructure
{$3Dmol.GLViewer} addSurface(type, style, atomsel, allsel, focus, surfacecallback) 
                     - Add Van der Waals surface 
{$3Dmol.GLViewer} animate(options) - Animate all models
{$3Dmol.GLViewer} center(sel, animationDuration, fixedPath) 
                    - Center the viewer around the given selection
{$3Dmol.GLViewer} clear() - Clear all objects in the viewer
{$3Dmol.GLViewer} pdbData(sel) - Generate PDB data from selected substructure
{$3Dmol.GLViewer} pngURI() - Return image URI of viewer contents
{$3Dmol.GLViewer} removeAllModels() - Remove all models
{$3Dmol.GLViewer} removeAllShapes() - Remove all shapes
{$3Dmol.GLViewer} removeAllSurfaces() - Remove all surfaces
{$3Dmol.GLViewer} render() - Render current state of viewer
{$3Dmol.GLViewer} rotate(angle, axis, animationDuration, fixedPath) 
                    - Rotate scene by angle degrees around axis
{$3Dmol.GLViewer} setBackgroundColor(hex, a) - Set the background color
{$3Dmol.GLViewer} setColorByElement(sel, colors) - Set color for selected elements
{$3Dmol.GLViewer} setColorByProperty(sel, prop, scheme) 
                    - Set color for selected elements with given properties
{$3Dmol.GLViewer} setSlab(near, far) - Set slab of view to clip contents
{$3Dmol.GLViewer} setStyle(sel, style) - Set style properties to selected atoms
{$3Dmol.GLViewer} spin(axis, speed) 
                    - Continuously rotate a scene around the specified axis
{$3Dmol.GLViewer} translate(x, y, animationDuration, fixedPath) 
                    - Translate current view by x,y screen coordinates
{$3Dmol.GLViewer} zoom(factor, animationDuration, fixedPath)
                    - Zoom current view by a constant factor
{$3Dmol.GLViewer} zoomTo(sel, animationDuration, fixedPath) 
                    - Zoom to center of atom selection
...

For the full documentation, visit $3Dmol.GLViewer Class API Website.

⇒ addBox() - Create 3D Boxes

⇐ $3Dmol.download('cid:...', ...) - Download CID Molecule

⇑ 3Dmol.js Classes and API

⇑⇑ 3Dmol.js FAQ