3Dmol.js Documentation GLViewer

# addArrow(spec) → {GLShape}

Create and add arrow shape

Parameters:

Name	Type	Description
`spec`	`ArrowSpec`	Style specification

View Source GLViewer.ts, line 5215

Returns:

Type: GLShape

Example

$3Dmol.download("pdb:4DM7",viewer,{},function(){
     
              viewer.setBackgroundColor(0xffffffff);
              viewer.addArrow({
                  start: {x:-10.0, y:0.0, z:0.0},
                  end: {x:0.0, y:-10.0, z:0.0},
                  radius: 1.0,
                  radiusRadio:1.0,
                  mid:1.0,
                  clickable:true,
                  callback:function(){
                      this.color.setHex(0xFF0000FF);
                      viewer.render( );
                  }
              });
              viewer.render();
            });

# addAsOneMolecule(data, format) → {GLModel}

Create and add model to viewer. Given multimodel file and its format,
all atoms are added to one model

Parameters:

Name	Type	Description
`data`	`string`	Input data
`format`	`string`	Input format (see `FileFormats`)

View Source GLViewer.ts, line 5600

Returns:

Type: GLModel

Example

$3Dmol.get('../test_structs/multiple.sdf', function(data){
              viewer.addAsOneMolecule(data, "sdf");
              viewer.zoomTo();
              viewer.render();
          });

# addBox(spec) → {GLShape}

Create and add box shape. This method provides a shorthand
way to create a box shape object

Parameters:

Name	Type	Description
`spec`	`BoxSpec`	Box shape style specification

View Source GLViewer.ts, line 5188

Returns:

Type: GLShape

Example

viewer.addLine({color:'red',start:{x:0,y:0,z:0},end:{x:5,y:0,z:0}});
     viewer.addLine({color:'blue',start:{x:0,y:0,z:0},end:{x:0,y:5,z:0}});
     viewer.addLine({color:'green',start:{x:0,y:0,z:0},end:{x:0,y:0,z:5}});
     
     viewer.addBox({center:{x:0,y:0,z:0},dimensions: {w:3,h:4,d:2},color:'magenta'});
     viewer.zoomTo();
     viewer.rotate(45, {x:1,y:1,z:1});
     viewer.render();

# addCurve(spec) → {GLShape}

Create and add Curve shape

Parameters:

Name	Type	Description
`spec`	`CurveSpec`	Style specification

View Source GLViewer.ts, line 5278

Returns:

Type: GLShape

Example

viewer.addCurve({points: [{x:0.0,y:0.0,z:0.0}, {x:5.0,y:3.0,z:0.0}, {x:5.0,y:7.0,z:0.0}, {x:0.0,y:10.0,z:0.0}],
                              radius:0.5,
                              smooth: 10,
                              fromArrow:false,
                              toArrow: true,
                              color:'orange',
                              });
          viewer.addCurve({points: [{x:-1,y:0.0,z:0.0}, {x:-5.0,y:5.0,z:0.0}, {x:-2,y:10.0,z:0.0}],
                              radius:1,
                              fromArrow:true,
                              toArrow: false,
                              color:'purple',
                              });
          viewer.zoomTo();
          viewer.render();

# addCustom(spec) → {GLShape}

Add custom shape component from user supplied function

Parameters:

Name	Type	Description
`spec`	`CustomSpec`	Style specification

View Source GLViewer.ts, line 5395

Returns:

Type: GLShape

Example

function triangle(viewer) {
        var vertices = [];
        var normals = [];
        var colors = [];
        var r = 20;
        //triangle
        vertices.push(new $3Dmol.Vector3(0,0,0));
        vertices.push(new $3Dmol.Vector3(r,0,0));
        vertices.push(new $3Dmol.Vector3(0,r,0));
        
        normals.push(new $3Dmol.Vector3(0,0,1));
        normals.push(new $3Dmol.Vector3(0,0,1));
        normals.push(new $3Dmol.Vector3(0,0,1));
        
        colors.push({r:1,g:0,b:0});
        colors.push({r:0,g:1,b:0});
        colors.push({r:0,g:0,b:1});
        
        var faces = [ 0,1,2 ];
        
        var spec = {vertexArr:vertices, normalArr: normals, faceArr:faces,color:colors};
        viewer.addCustom(spec);
    }
    triangle(viewer);
    viewer.render();

# addCylinder(spec) → {GLShape}

Create and add cylinder shape

Parameters:

Name	Type	Description
`spec`	`CylinderSpec`	Style specification

View Source GLViewer.ts, line 5252

Returns:

Type: GLShape

Example

viewer.setBackgroundColor(0xffffffff);
          viewer.addCylinder({start:{x:0.0,y:0.0,z:0.0},
                              end:{x:10.0,y:0.0,z:0.0},
                              radius:1.0,
                              fromCap:1,
                              toCap:2,
                              color:'red',
                              hoverable:true,
                              clickable:true,
                              callback:function(){ this.color.setHex(0x00FFFF00);viewer.render( );},
                              hover_callback: function(){ viewer.render( );},
                              unhover_callback: function(){ this.color.setHex(0xFF000000);viewer.render( );}
                             });
          viewer.addCylinder({start:{x:0.0,y:2.0,z:0.0},
                              end:{x:0.0,y:10.0,z:0.0},
                              radius:0.5,
                              fromCap:false,
                              toCap:true,
                              color:'teal'});
          viewer.addCylinder({start:{x:15.0,y:0.0,z:0.0},
                              end:{x:20.0,y:0.0,z:0.0},
                              radius:1.0,
                              color:'black',
                              fromCap:false,
                              toCap:false});
          viewer.render();

# addIsosurface(data, spec) → {GLShape}

Construct isosurface from volumetric data. This is more flexible
than addVolumetricData, but can not be used with py3Dmol.

Parameters:

Name	Type	Description
`data`	`VolumeData`	volumetric data
`spec`	`IsoSurfaceSpec`	Shape style specification

View Source GLViewer.ts, line 5437

Returns:

Type: GLShape

Example

$3Dmol.get('../test_structs/benzene-homo.cube', function(data){
              var voldata = new $3Dmol.VolumeData(data, "cube");
              viewer.addIsosurface(voldata, {isoval: 0.01,
                                             color: "blue"});
              viewer.addIsosurface(voldata, {isoval: -0.01,
                                             color: "red"});
              viewer.zoomTo();
              viewer.render();
            });

# addLabel(text, options, sel, noshow) → {Label}

Add label to viewer

Parameters:

Name	Type	Description
`text`	`string`	Label text
`options`	`LabelSpec`	Label style specification
`sel`	`AtomSelection`	Set position of label to center of this selection
`noshow`	`boolean`	if true, do not immediately display label - when adding multiple labels this is more efficient

View Source GLViewer.ts, line 5032

Returns:

Type: Label

Example

$3Dmol.download("pdb:2EJ0",viewer,{},function(){
     
              viewer.addLabel("Aromatic", {position: {x:-6.89, y:0.75, z:0.35}, backgroundColor: 0x800080, backgroundOpacity: 0.8});
              viewer.addLabel("Label",{font:'sans-serif',fontSize:18,fontColor:'white',fontOpacity:1,borderThickness:1.0,
                                       borderColor:'red',borderOpacity:0.5,backgroundColor:'black',backgroundOpacity:0.5,
                                       position:{x:50.0,y:0.0,z:0.0},inFront:true,showBackground:true});
              viewer.setStyle({chain:'A'},{cross:{hidden:true}});
              viewer.setStyle({chain:'B'},{cross:{hidden:false,
                                                  linewidth:1.0,
                                                  colorscheme:'greenCarbon'}});
              viewer.setStyle({chain:'C'},{cross:{hidden:false,
                                                  linewidth:1.0,
                                                  radius:0.5}});
              viewer.setStyle({chain:'D'},{cross:{hidden:false,
                                                  linewidth:10.0}});
              viewer.setStyle({chain:'E'},{cross:{hidden:false,
                                                  linewidth:1.0,
                                                  color:'black'}});
     
              viewer.render();
     
     
            });

# addLine(spec) → {GLShape}

Create and add line shape

Parameters:

Name	Type	Description
`spec`	`LineSpec`	Style specification, can specify dashed, dashLength, and gapLength

View Source GLViewer.ts, line 5298

Returns:

Type: GLShape

Example

$3Dmol.download("pdb:2ABJ",viewer,{},function(){
     
              viewer.setViewStyle({style:"outline"});
              viewer.setStyle({chain:'A'},{sphere:{hidden:true}});
              viewer.setStyle({chain:'D'},{sphere:{radius:3.0}});
              viewer.setStyle({chain:'G'},{sphere:{colorscheme:'greenCarbon'}});
              viewer.setStyle({chain:'J'},{sphere:{color:'blue'}});
              viewer.addLine({dashed:true,start:{x:0,y:0,z:0},end:{x:100,y:100,z:100}});
              viewer.render();
          });

# addLineDashed(spec, s)

Add dashed line to shape

Parameters:

Name	Type	Description
`spec`	`CylinderSpec`
`s`	`GLShape`

View Source GLViewer.ts, line 5360

# addMesh(mesh, style) → {number}

Adds an explicit mesh as a surface object.

Parameters:

Name	Type	Description
`mesh`	`Mesh`
`style`	`Object`

View Source GLViewer.ts, line 5827

Returns:

surfid

Type: number

# addModel(data, format, options) → {GLModel}

Create and add model to viewer, given molecular data and its format

Parameters:

Name	Type	Description
`data`	`string`	Input data
`format`	`string`	Input format ('pdb', 'sdf', 'xyz', 'pqr', or 'mol2')
`options`	`ParserOptionsSpec`	format dependent options. Attributes depend on the input file format.

View Source GLViewer.ts, line 5549

Returns:

Type: GLModel

Example

viewer.setViewStyle({style:"outline"});
          $3Dmol.get('data/1fas.pqr', function(data){
              viewer.addModel(data, "pqr");
              $3Dmol.get("data/1fas.cube",function(volumedata){
                  viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity:0.85,voldata: new $3Dmol.VolumeData(volumedata, "cube"), volscheme: new $3Dmol.Gradient.RWB(-10,10)},{});
     
              viewer.render();
              });
              viewer.zoomTo();
          });

# addModels(data, format) → {Array.<GLModel>}

Given multimodel file and its format, add atom data to the viewer as separate models
and return list of these models

Parameters:

Name	Type	Description
`data`	`string`	Input data
`format`	`string`	Input format (see `FileFormats`)

View Source GLViewer.ts, line 5560

Returns:

Type: Array.<GLModel>

# addModelsAsFrames(data, format) → {GLModel}

Create and add model to viewer. Given multimodel file and its format,
different atomlists are stored in model's frame
property and model's atoms are set to the 0th frame

Parameters:

Name	Type	Description
`data`	`string`	Input data
`format`	`string`	Input format (see `FileFormats`)

View Source GLViewer.ts, line 5581

Returns:

Type: GLModel

Example

$3Dmol.get('../test_structs/multiple2.xyz', function(data){
              viewer.addModelsAsFrames(data, "xyz");
              viewer.animate({loop: "forward",reps: 1});
              viewer.setStyle({stick:{colorscheme:'magentaCarbon'}});
              viewer.zoomTo();
              viewer.render();
          });

# addPropertyLabels(prop, sel, style)

Add property labels. This will generate one label per a selected
atom at the atom's coordinates with the property value as the label text.

Parameters:

Name	Type	Description
`prop`	`string`	property name
`sel`	`AtomSelectionSpec`
`style`	`AtomStyleSpec`	@example $3Dmol.download("cid:5291",viewer,{},function(){ viewer.setStyle({stick: {radius:.2}}); viewer.addPropertyLabels("index",{not:{elem:'H'}}, {fontColor:'black',font: 'sans-serif', fontSize: 28, showBackground:false,alignment:'center'}); viewer.zoomTo(); viewer.render(); });

View Source GLViewer.ts, line 5070

# addResLabels(sel, style, byframe)

Add residue labels. This will generate one label per a
residue within the selected atoms. The label will be at the
centroid of the atoms and styled according to the passed style.
The label text will be [resn][resi]

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`
`style`	`AtomStyleSpec`
`byframe`	`boolean`	if true, create labels for every individual frame, not just current

View Source GLViewer.ts, line 5052

Example

$3Dmol.download("mmtf:2ll5",viewer,{},function(){
              viewer.setStyle({stick:{radius:0.15},cartoon:{}});
              viewer.addResLabels({hetflag:false}, {font: 'Arial', fontColor:'black',showBackground:false, screenOffset: {x:0,y:0}});
              viewer.zoomTo();
              viewer.render();
            });

# addShape(shapeSpec) → {GLShape}

Add shape object to viewer

Parameters:

Name	Type	Description
`shapeSpec`	`ShapeSpec`	style specification for label

See:

{GLShape}

View Source GLViewer.ts, line 5139

Returns:

Type: GLShape

# addSphere(spec) → {GLShape}

Create and add sphere shape. This method provides a shorthand
way to create a spherical shape object

Parameters:

Name	Type	Description
`spec`	`SphereShapeSpec`	Sphere shape style specification

View Source GLViewer.ts, line 5168

Returns:

Type: GLShape

Example

viewer.addSphere({center:{x:0,y:0,z:0},radius:10.0,color:'red'});
     
     viewer.render();

# addStyle(sel, style)

Add style properties to all selected atoms

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	Atom selection specification. Can be omitted to select all
`style`	`AtomStyleSpec`	style spec to add to specified atoms

View Source GLViewer.ts, line 5681

Example

$3Dmol.download('pdb:5IRE',viewer,{doAssembly: false},function(m) {
    viewer.setStyle({cartoon:{}});
    //keep cartoon style, but show thick sticks for chain A
    viewer.addStyle({chain:'A'},{stick:{radius:.5,colorscheme:"magentaCarbon"}});
    viewer.zoomTo();
    viewer.render();
    });

# addSurface(type, style, atomsel, allsel, focus, surfacecallback) → {Promise}

Add surface representation to atoms

Parameters:

Name	Type	Description
`type`	`SurfaceType` \| `string`	Surface type (VDW, MS, SAS, or SES)
`style`	`SurfaceStyleSpec`	optional style specification for surface material (e.g. for different coloring scheme, etc)
`atomsel`	`AtomSelectionSpec`	Show surface for atoms in this selection
`allsel`	`AtomSelectionSpec`	Use atoms in this selection to calculate surface; may be larger group than 'atomsel'
`focus`	`AtomSelectionSpec`	Optionally begin rendering surface specified atoms
`surfacecallback`	`function`	function to be called after setting the surface

View Source GLViewer.ts, line 5840

Returns:

promise - Returns a promise that ultimately resovles to the surfid. Returns surfid immediately if surfacecallback is specified. Returned promise has a [surfid, GLViewer, style, atomsel, allsel, focus] fields for immediate access.

Type: Promise

# addUnitCell(model, spec)

Create and add unit cell visualization.

Parameters:

Name	Type	Description
`model`	`GLModel` \| `number`	Model with unit cell information (e.g., pdb derived). If omitted uses most recently added model.
`spec`	`UnitCellStyleSpec`	visualization style

View Source GLViewer.ts, line 5315

Example

$3Dmol.get('data/1jpy.cif', function(data) {
              let m = viewer.addModel(data);
              viewer.addUnitCell(m, {box:{color:'purple'},alabel:'X',blabel:'Y',clabel:'Z',alabelstyle: {fontColor: 'black',backgroundColor:'white',inFront:true,fontSize:40},astyle:{color:'darkred', radius:5,midpos: -10}});
              viewer.zoomTo();
              viewer.render();
    });

# addVolumetricData(data, format, spec) → {GLShape}

Construct isosurface from volumetric data in gaussian cube format

Parameters:

Name	Type	Description
`data`	`String`	Input file contents
`format`	`String`	Input file format
`spec`	`VolumetricRendererSpec` \| `IsoSurfaceSpec`	Shape style specification

View Source GLViewer.ts, line 5416

Returns:

Type: GLShape

Example

$3Dmol.get('data/bohr.cube', function(data) {
     
    viewer.addVolumetricData(data, "cube", {isoval: -0.01, color: "red", opacity: 0.95});
    viewer.setStyle({cartoon:{},stick:{}});
    viewer.zoomTo();
    viewer.render();
    });

# addVolumetricRender(data, spec) → {GLShape}

Create volumetric renderer for volumetricData

Parameters:

Name	Type	Description
`data`	`VolumeData`	volumetric data
`spec`	`VolumetricRenderSpec`	specification of volumetric render

View Source GLViewer.ts, line 5448

Returns:

Type: GLShape

# animate(options)

Animate all models in viewer from their respective frames

Parameters:

Name	Type	Description
`options`	`Object`	can specify interval (speed of animation), loop (direction of looping, 'backward', 'forward' or 'backAndForth'), step interval between frames ('step'), startFrame, and reps (numer of repetitions, 0 indicates infinite loop)

View Source GLViewer.ts, line 5499

# apngURI(nframes) → {Promise}

Return a promise that resolves to an animated PNG image URI of
viewer contents (base64 encoded) for nframes of viewer changes.

Parameters:

Name	Type	Description
`nframes`	`number`

View Source GLViewer.ts, line 4572

Returns:

Type: Promise

# atomIsSelected(atom, sel) → {boolean}

Parameters:

Name	Type	Description
`atom`	`AtomSpec`
`sel`	`AtomSelectionSpec`

View Source GLViewer.ts, line 1650

Returns:

Type: boolean

# carveUpExtent(extent, atomlist, atomstoshow) → {Array}

Parameters:

Name	Type	Description
`extent`	`Array`
`atomlist`	`Array.<AtomSpec>`
`atomstoshow`	`Array.<AtomSpec>`

View Source GLViewer.ts, line 3472

Returns:

Type: Array

# center(selopt, animationDurationopt, fixedPathopt)

Re-center the viewer around the provided selection (unlike zoomTo, does not zoom).

Parameters:

Name	Type	Attributes	Description
`sel`	`AtomSelectionSpec`	<optional>	Selection specification specifying model and atom properties to select. Default: all atoms in viewer
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of a zoom animation
`fixedPath`	`Boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation *

View Source GLViewer.ts, line 4940

Example

// if the user were to pass the animationDuration value to
          // the function like so viewer.zoomTo({resn:'STI'},1000);
        //   the program would center on resn 'STI' over the course
        //   of 1 second(1000 milleseconds).
 // Reposition to centroid of all atoms of all models in this
//viewer glviewer.center();
    $3Dmol.get('data/4csv.pdb', function(data) {
    viewer.addModel(data,'pdb');
    viewer.setStyle({cartoon:{},stick:{}});
    viewer.center();
    viewer.render(callback);
    });

# clear()

Clear scene of all objects

View Source GLViewer.ts, line 5889

# createModelFrom(sel, extractopt) → {GLModel}

Create a new model from atoms specified by sel.
If extract, removes selected atoms from existing models

Parameters:

Name	Type	Attributes	Description
`sel`	`AtomSelectionSpec`		Atom selection specification
`extract`	`boolean`	<optional>	If true, remove selected atoms from existing models

View Source GLViewer.ts, line 5640

Returns:

Type: GLModel

# enableContextMenu(sel, contextMenuEnabled)

enable context menu and callback of selected atoms

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	atom selection to apply hoverable settings to
`contextMenuEnabled`	`boolean`	whether contextMenu-handling is enabled for the selection

View Source GLViewer.ts, line 5737

# enableFog(fog)

Enable/disable fog for content far from the camera

Parameters:

Name	Type	Description
`fog`	`boolean`	whether to enable or disable the fog

View Source GLViewer.ts, line 5464

# exportJSON(includeStyles, modelID) → {string}

Export one or all of the loaded models into ChemDoodle compatible JSON.

Parameters:

Name	Type	Description
`includeStyles`	`boolean`	Whether or not to include style information.
`modelID`	`number`	Optional parameter for which model to export. If left out, export all of them.

View Source GLViewer.ts, line 5623

Returns:

Type: string

# exportVRML()

return a VRML string representation of the scene. Include VRML header information

View Source GLViewer.ts, line 5629

Returns:

VRML

# fitSlab(sel)

Adjust slab to fully enclose selection (default everything).

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	Selection specification specifying model and atom properties to select. Default: all atoms in viewer

View Source GLViewer.ts, line 4913

# getAtomsFromSel(sel) → {Array.<AtomSpec>}

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`

View Source GLViewer.ts, line 1632

Returns:

Type: Array.<AtomSpec>

# getCanvas() → {HTMLCanvasElement}

Return underlying canvas element.

View Source GLViewer.ts, line 4579

Returns:

Type: HTMLCanvasElement

# getConfig()

Return configuration of viewer

View Source GLViewer.ts, line 4495

# getFrame()

Gets the current viewer frame.

View Source GLViewer.ts, line 5482

# getInternalState()

Return object representing internal state of
the viewer appropriate for passing to setInternalState

View Source GLViewer.ts, line 4511

# getModel(idopt) → {GLModel}

Return specified model

Parameters:

Name	Type	Attributes	Default	Description
`id`	`number`	<optional>	last model id	Retrieve model with specified id

Default Value:

Returns last model added to viewer or null if there are no models

View Source GLViewer.ts, line 4719

Returns:

Type: GLModel

Example

// Retrieve reference to first GLModel added var m =
   $3Dmol.download("pdb:1UBQ",viewer,{},function(m1){
              $3Dmol.download("pdb:1UBI", viewer,{}, function(m2) {
                viewer.zoomTo();
                m1.setStyle({cartoon: {color:'green'}});
                //could use m2 here as well
                viewer.getModel().setStyle({cartoon: {color:'blue'}});
                viewer.render();
            })
          });

# getNumFrames() → {number}

Returns the number of frames that the model with the most frames in the viewer has

View Source GLViewer.ts, line 5490

Returns:

Type: number

# getPerceivedDistance() → {number}

Return the z distance between the model and the camera

View Source GLViewer.ts, line 5926

Returns:

distance

Type: number

# getRenderer()

Return renderer element.

View Source GLViewer.ts, line 4585

# getSlab() → {Object}

Get slab of view (contents outside of slab are clipped).

Properties:

Name	Type	Description
`near`	`number`	near clipping plane distance
`far`	`number`	far clipping plane distance

View Source GLViewer.ts, line 4992

Returns:

Type: Object

# getSurface(surf)

Return surface object

Parameters:

Name	Type	Description
`surf`	`number`	surface id

View Source GLViewer.ts, line 5865

# getUniqueValues(attribute, sel) → {Array.<Object>}

Returns valid values for the specified attribute in the given selection

Parameters:

Name	Type	Description
`attribute`	`string`
`sel`	`AtomSelectionSpec`

View Source GLViewer.ts, line 4824

Returns:

Type: Array.<Object>

# getView() → {Array.<number>}

Returns an array representing the current viewpoint.
Translation, zoom, and rotation quaternion.

View Source GLViewer.ts, line 4769

Returns:

[ pos.x, pos.y, pos.z, rotationGroup.position.z, q.x, q.y, q.z, q.w ]

Type: Array.<number>

# hasVolumetricRender() → {boolean}

Return true if volumetric rendering is supported (WebGL 2.0 required)

View Source GLViewer.ts, line 5456

Returns:

Type: boolean

# isAnimated() → {boolean}

Return true if viewer is currently being animated, false otherwise

View Source GLViewer.ts, line 5524

Returns:

Type: boolean

# jmolMoveTo()

return Jmol moveto command to position this scene

View Source GLViewer.ts, line 5883

# linkViewer(otherview)

Synchronize this view matrix of this viewer to the passed viewer.
When the viewpoint of this viewer changes, the other viewer will
be set to this viewer's view.

Parameters:

Name	Type	Description
`otherview`	`$3Dmol.GLViewer`

View Source GLViewer.ts, line 5919

# mapAtomProperties(props,, sel)

Add specified properties to all atoms matching input argument

Parameters:

Name	Type	Description
`props,`	`Object`	either array of atom selectors with associated props, or function that takes atom and sets its properties
`sel`	`AtomSelectionSpec`	subset of atoms to work on - model selection must be specified here

View Source GLViewer.ts, line 5910

Example

$3Dmol.get('../test_structs/b.sdf', function(data){
                  viewer.addModel(data,'sdf');
                  let props = [];
                  //make the atom index a property x
                  for(let i = 0; i < 8; i++) {
                    props.push({index:i,props:{'x':i}});
                  }
                  viewer.mapAtomProperties(props);
                  viewer.setStyle({sphere:{colorscheme:{gradient:'roygb',prop:'x',min:0,max:8}}});
                  viewer.zoomTo();
                  viewer.render();
                });

# modelToScreen() → {object|list}

Convert model coordinates to screen coordinates.

Parameters:

Type	Description
`object` \| `list`	an object or list of objects with x,y,z attributes (e.g. an atom)

View Source GLViewer.ts, line 4455

Returns:

and object or list of {x: screenX, y: screenY}

Type: object | list

# pauseAnimate()

Pause animation of all models in viewer

View Source GLViewer.ts, line 5511

# pdbData(sel) → {string}

Return pdb output of selected atoms (if atoms from pdb input)

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	Selection specification specifying model and atom properties to select. Default: all atoms in viewer

View Source GLViewer.ts, line 4833

Returns:

PDB string of selected atoms

Type: string

# pngURI()

Return image URI of viewer contents (base64 encoded). *

View Source GLViewer.ts, line 4563

# removeAllLabels()

Remove all labels from viewer

View Source GLViewer.ts, line 5107

Example

$3Dmol.download("pdb:1ubq",viewer,{},function(){
     
           viewer.addResLabels();
           viewer.setStyle({},{stick:{}});
           viewer.render( ); //show labels
     
           viewer.removeAllLabels();
           viewer.render(); //hide labels
    });

# removeAllModels()

Delete all existing models

View Source GLViewer.ts, line 5614

# removeAllShapes()

Remove all shape objects from viewer

View Source GLViewer.ts, line 5153

# removeAllSurfaces()

Remove all surfaces.

View Source GLViewer.ts, line 5878

# removeLabel(label)

Remove label from viewer

Parameters:

Name	Type	Description
`label`	`Label`	$3Dmol label

View Source GLViewer.ts, line 5090

Example

// Remove labels created in
     $3Dmol.download("pdb:2EJ0",viewer,{},function(){
              var toremove = viewer.addLabel("Aromatic", {position: {x:-6.89, y:0.75, z:0.35}, backgroundColor: 0x800080, backgroundOpacity: 0.8});
              viewer.addLabel("Label",{font:'sans-serif',fontSize:18,fontColor:'white',fontOpacity:1,borderThickness:1.0,
                                       borderColor:'red',borderOpacity:0.5,backgroundColor:'black',backgroundOpacity:0.5,
                                       position:{x:50.0,y:0.0,z:0.0},inFront:true,showBackground:true});
              viewer.removeLabel(toremove);
              viewer.render();
     
     
            });

# removeModel(model)

Delete specified model from viewer

Parameters:

Name	Type	Description
`model`	`GLModel` \| `number`

View Source GLViewer.ts, line 5608

# removeShape(shape)

Remove shape object from viewer

Parameters:

Name	Type	Description
`shape`	`GLShape`	Reference to shape object to remove

View Source GLViewer.ts, line 5147

# removeSurface(surf)

Remove surface with given ID

Parameters:

Name	Type	Description
`surf`	`number`	surface id

View Source GLViewer.ts, line 5872

# removeUnitCell(model)

Remove unit cell visualization from model.

Parameters:

Name	Type	Description
`model`	`GLModel` \| `number`	Model with unit cell information (e.g., pdb derived). If omitted uses most recently added model.

View Source GLViewer.ts, line 5332

Example

$3Dmol.get('data/icsd_200866.cif', function(data) {
             let m = viewer.addModel(data);
             viewer.setStyle({sphere:{}})
             viewer.addUnitCell();
             viewer.zoomTo();
             viewer.removeUnitCell();
             viewer.render();
       });

# render(callbackopt, extsopt)

Render current state of viewer, after
adding/removing models, applying styles, etc.

Parameters:

Name	Type	Attributes	Description
`callback`		<optional>
`exts`		<optional>

View Source GLViewer.ts, line 4786

# replicateUnitCell(A, B, C, model)

Replicate atoms in model to form a super cell of the specified dimensions.
Original cell will be centered as much as possible.

Parameters:

Name	Type	Description
`A`	`integer`	number of times to replicate cell in X dimension.
`B`	`integer`	number of times to replicate cell in Y dimension. If absent, X value is used.
`C`	`integer`	number of times to replicate cell in Z dimension. If absent, Y value is used.
`model`	`GLModel`	Model with unit cell information (e.g., pdb derived). If omitted uses most recently added model.

View Source GLViewer.ts, line 5353

Example

$3Dmol.get('data/icsd_200866.cif', function(data) {
             let m = viewer.addModel(data);
             viewer.setStyle({sphere:{scale:.25}})
             viewer.addUnitCell();
             viewer.zoomTo();
             viewer.replicateUnitCell(3,2,1,m);
             viewer.render();
       });

# resize()

Resize viewer according to containing HTML element's dimensions

View Source GLViewer.ts, line 4697

# resumeAnimate()

Resume animation of all models in viewer

View Source GLViewer.ts, line 5517

# rotate(angleopt, axisopt, animationDurationopt, fixedPathopt)

Rotate scene by angle degrees around axis

Parameters:

Name	Type	Attributes	Description
`angle`	`number`	<optional>	Angle, in degrees, to rotate by.
`axis`	`string`	<optional>	Axis ("x", "y", "z", "vx", "vy", or "vz") to rotate around. Default "y". View relative (rather than model relative) axes are prefixed with v. Axis can also be specified as a vector.
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of the rotation animation. Default 0 (no animation)
`fixedPath`	`boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation *

View Source GLViewer.ts, line 4761

Example

$3Dmol.download('cid:4000', viewer, {}, function() {
    viewer.setStyle({stick:{}});
    viewer.zoomTo();
    viewer.rotate(90,'y',1);
    viewer.render(callback);
    });

# screenOffsetToModel()

For a given screen (x,y) displacement return model displacement

View Source GLViewer.ts, line 4464

# screenToModelDistance()

Distance from screen coordinate to model coordinate assuming screen point
is projected to the same depth as model coordinate

View Source GLViewer.ts, line 4473

# selectedAtoms(sel) → {Array.<AtomSpec>}

return list of atoms selected by sel

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`

View Source GLViewer.ts, line 4814

Returns:

Type: Array.<AtomSpec>

# setAutoEyeSeparation(isright, x) → {number}

Used for setting an approx value of eyeSeparation. Created for calling by StereoViewer object

Parameters:

Name	Type	Description
`isright`	`boolean`
`x`	`number`

View Source GLViewer.ts, line 5943

Returns:

camera x position

Type: number

# setBackgroundColor(hex, a)

Set the background color (default white)

Parameters:

Name	Type	Description
`hex`	`number`	Hexcode specified background color, or standard color spec
`a`	`number`	Alpha level (default 1.0)

View Source GLViewer.ts, line 4631

Example

viewer.setBackgroundColor(0x000000);

# setCameraParameters()

Set camera parameters (distance to the origin and field of view)

Parameters:

Type	Description
`parameters`	new camera parameters, with possible fields being fov for the field of view, z for the distance to the origin, and orthographic (boolean) for kind of projection (default false).

View Source GLViewer.ts, line 4557

Example

$3Dmol.get("data/set1_122_complex.mol2", function(data) {
            var m = viewer.addModel(data);
            viewer.setStyle({stick:{}});
            viewer.zoomTo();
            viewer.setCameraParameters({ fov: 10 , z: 300 });
            viewer.render();
        });

# setClickable(sel, clickable, callback)

Set click-handling properties to all selected atoms. Important: render must be called for this to take effect.

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	atom selection to apply clickable settings to
`clickable`	`boolean`	whether click-handling is enabled for the selection
`callback`	`function`	function called when an atom in the selection is clicked

View Source GLViewer.ts, line 5701

Example

$3Dmol.download("cid:307900",viewer,{},function(){
     
               viewer.setStyle({},{sphere:{}});
               viewer.setClickable({},true,function(atom,viewer,event,container) {
                   viewer.addLabel(atom.resn+":"+atom.atom,{position: atom, backgroundColor: 'darkgreen', backgroundOpacity: 0.8});
               });
               viewer.render();
    });

# setColorByElement(sel, colors)

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`
`colors`	`object`

View Source GLViewer.ts, line 5765

# setColorByProperty(sel, prop, scheme, range)

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`
`prop`	`string`
`scheme`	`Gradient` \| `string`
`range`	`object`

View Source GLViewer.ts, line 5758

# setConfig(c)

Set the configuration object. Note that some setting may only
have an effect at viewer creation time.

Parameters:

Name	Type	Description
`c`

View Source GLViewer.ts, line 4503

# setContainer(element)

Change the viewer's container element
Also useful if the original container element was removed from the DOM.

Parameters:

Name	Type	Description
`element`	`Object` \| `string`	Either HTML element or string identifier. Defaults to the element used to initialize the viewer.

View Source GLViewer.ts, line 4613

# setDefaultCartoonQuality(val)

Set the default cartoon quality for newly created models. Default is 5.
Current models are not affected.

Parameters:

Name	Type	Description
`val`	`number`

View Source GLViewer.ts, line 5952

# setFrame(framenum) → {Promise}

Sets the atomlists of all models in the viewer to specified frame.
Shapes and labels can also be displayed by frame.
Sets to last frame if framenum out of range

Parameters:

Name	Type	Description
`framenum`	`number`	fame index to use, starts at zero

View Source GLViewer.ts, line 5475

Returns:

Type: Promise

# setHeight(h)

Set viewer height independently of the HTML container. This is probably not what you want.

Parameters:

Name	Type	Description
`h`	`number`	Height in pixels

View Source GLViewer.ts, line 4690

# setHoverDuration(hoverDurationopt)

Set the duration of the hover delay

Parameters:

Name	Type	Attributes	Description
`hoverDuration`	`number`	<optional>	an optional parameter that denotes the duration of the hover delay (in milliseconds) before the hover action is called

View Source GLViewer.ts, line 4596

# setHoverable(sel, hoverable, hover_callback, unhover_callback)

Set hoverable and callback of selected atoms

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	atom selection to apply hoverable settings to
`hoverable`	`boolean`	whether hover-handling is enabled for the selection
`hover_callback`	`function`	function called when an atom in the selection is hovered over
`unhover_callback`	`function`	function called when the mouse moves out of the hover area

View Source GLViewer.ts, line 5729

Example

$3Dmol.download("pdb:1ubq",viewer,{},function(){
     
           viewer.setHoverable({},true,function(atom,viewer,event,container) {
               if(!atom.label) {
                atom.label = viewer.addLabel(atom.resn+":"+atom.atom,{position: atom, backgroundColor: 'mintcream', fontColor:'black'});
               }
           },
           function(atom) {
               if(atom.label) {
                viewer.removeLabel(atom.label);
                delete atom.label;
               }
            }
           );
           viewer.setStyle({},{stick:{}});
           viewer.render();
    });

# setInternalState(state)

Overwrite internal state of the viewer with passed object
which should come from getInternalState.

Parameters:

Name	Type	Description
`state`

View Source GLViewer.ts, line 4520

# setLabelStyle(label, stylespec) → {Label}

Modify existing label's style

Parameters:

Name	Type	Description
`label`	`Label`	$3Dmol label
`stylespec`	`LabelSpec`	Label style specification

View Source GLViewer.ts, line 5118

Returns:

Type: Label

# setLabelText(label, text) → {Label}

Modify existing label's text

Parameters:

Name	Type	Description
`label`	`Label`	$3Dmol label
`text`	`String`	Label text

View Source GLViewer.ts, line 5129

Returns:

Type: Label

# setPerceivedDistance(dist)

Set the distance between the model and the camera
Essentially zooming. Useful while stereo rendering.

Parameters:

Name	Type	Description
`dist`	`number`

View Source GLViewer.ts, line 5934

# setProjection(proj)

Set view projection scheme. Either orthographic or perspective.
Default is perspective. Orthographic can also be enabled on viewer creation
by setting orthographic to true in the config object.

Parameters:

Name	Type	Description
`proj`

View Source GLViewer.ts, line 4655

Example

viewer.setViewStyle({style:"outline"});
          $3Dmol.get('data/1fas.pqr', function(data){
              viewer.addModel(data, "pqr");
              $3Dmol.get("data/1fas.cube",function(volumedata){
                  viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity:0.85,voldata: new $3Dmol.VolumeData(volumedata, "cube"), volscheme: new $3Dmol.Gradient.RWB(-10,10)},{});
              });
              viewer.zoomTo();
     
              viewer.setProjection("orthographic");
              viewer.render(callback);
          });

# setSlab(near, far)

Set slab of view (contents outside of slab are clipped).
Must call render to update.

Parameters:

Name	Type	Description
`near`	`number`	near clipping plane distance
`far`	`number`	far clipping plane distance

View Source GLViewer.ts, line 4982

# setStateChangeCallback(callback)

Set a callback to call when the view has potentially changed.

Parameters:

Name	Type	Description
`callback`

View Source GLViewer.ts, line 4489

# setStyle(sel, style)

Set style properties to all selected atoms

Parameters:

Name	Type	Description
`sel`	`AtomSelectionSpec`	Atom selection specification. Can be omitted to select all.
`style`	`AtomStyleSpec`	Style spec to apply to specified atoms

View Source GLViewer.ts, line 5663

Example

viewer.setBackgroundColor(0xffffffff);
    $3Dmol.download('pdb:5IRE',viewer,{doAssembly: false},function(m) {
    m.setStyle({chain:'A'},{'cartoon':{color:'spectrum'}});
    m.setStyle({chain:'C'},{'cartoon':{style:'trace',color:'blue'}});
    m.setStyle({chain:'E'},{'cartoon':{tubes:true,arrows:true,color:'green',opacity:0.75}});
    m.setStyle({chain:'B'},{'cartoon':{color:'red',opacity:0.5}});
    m.setStyle({chain:'D'},{'cartoon':{style:'trace',color:'grey',opacity:0.75}});
    m.setStyle({chain:'F'},{'cartoon':{arrows:true,color:'white'}});
    // viewer.addStyle({chain:'B'},{line:{}});
    viewer.zoomTo();
    viewer.render();
    });

# setSurfaceMaterialStyle(surf, style)

Set the surface material to something else, must render change

Parameters:

Name	Type	Description
`surf`	`number`	Surface ID to apply changes to
`style`	`SurfaceStyleSpec`	new material style specification

View Source GLViewer.ts, line 5858

Example

$3Dmol.get("data/9002806.cif",function(data){
        viewer.addModel(data);
        viewer.setStyle({stick:{}});
        let surf = viewer.addSurface("SAS");
        surf.then(function() {
            viewer.setSurfaceMaterialStyle(surf.surfid, {color:'blue',opacity:0.5});
            viewer.render();
            });
       });

# setView(arg)

Sets the view to the specified translation, zoom, and rotation.

Parameters:

Name	Type	Description
`arg`	`Array.<number>`	Array formatted identically to the return value of getView

View Source GLViewer.ts, line 4776

# setViewChangeCallback(callback)

Set a callback to call when the view has potentially changed.

Parameters:

Name	Type	Description
`callback`

View Source GLViewer.ts, line 4481

# setViewStyle(parameters)

Set global view styles.

Parameters:

Name	Type	Description
`parameters`

View Source GLViewer.ts, line 4674

Example

viewer.setViewStyle({style:"outline"});
          $3Dmol.get('data/1fas.pqr', function(data){
              viewer.addModel(data, "pqr");
              $3Dmol.get("data/1fas.cube",function(volumedata){
                  viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity:0.85,voldata: new $3Dmol.VolumeData(volumedata, "cube"), volscheme: new $3Dmol.Gradient.RWB(-10,10)},{});
              });
              viewer.zoomTo();
              viewer.render(callback);
          });

# setWidth(w)

Set viewer width independently of the HTML container. This is probably not what you want.

Parameters:

Name	Type	Description
`w`	`number`	Width in pixels

View Source GLViewer.ts, line 4682

# setZoomLimits()

Set lower and upper limit stops for zoom.

Parameters:

Type	Description
`lower`	limit on zoom in (positive number). Default 0.
`upper`	limit on zoom out (positive number). Default infinite.

View Source GLViewer.ts, line 4538

Example

$3Dmol.get("data/set1_122_complex.mol2", function(moldata) {
            var m = viewer.addModel(moldata);
            viewer.setStyle({stick:{colorscheme:"Jmol"}});
            viewer.setZoomLimits(100,200);
            viewer.zoomTo();
            viewer.zoom(10); //will not zoom all the way
            viewer.render();
        });

# spin(axis, speed)

Continuously rotate a scene around the specified axis.

Call spin(false) to stop spinning.

Parameters:

Name	Type	Description
`axis`	`string` \| `boolean` \| `Array`	[axis] - Axis ("x", "y", "z", "vx", "vy", or "vz") to rotate around. Default "y". View relative (rather than model relative) axes are prefixed with v.
`speed`	`number`	[speed] - Speed multiplier for spinning the viewer. 1 is default and a negative value reverses the direction of the spin.

View Source GLViewer.ts, line 4735

# stopAnimate()

Stop animation of all models in viewer

View Source GLViewer.ts, line 5505

# targetedObjects(x, y)

Return a list of objects that intersect that at the specified viewer position.

Parameters:

Name	Type	Description
`x`		x position in screen coordinates
`y`		y position in screen coordinates
	`Array.<Object>`	list of objects or selection object specifying what object to check for targeting

View Source GLViewer.ts, line 4448

# translate(x, y, animationDurationopt, fixedPathopt)

Translate current view by x,y screen coordinates
This pans the camera rather than translating the model.

Parameters:

Name	Type	Attributes	Description
`x`	`number`		Relative change in view coordinates of camera
`y`	`number`		Relative change in view coordinates of camera
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of a zoom animation
`fixedPath`	`Boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation *

View Source GLViewer.ts, line 4879

Example

$3Dmol.get('data/4csv.pdb', function(data) {
    viewer.addModel(data,'pdb');
    viewer.setStyle({cartoon:{},stick:{}});
    viewer.zoomTo();
    viewer.translate(200,50);
    viewer.rotate(90,'z');
    viewer.render(callback);
    });

# translateScene(x, y, animationDurationopt, fixedPathopt)

Translate current models by x,y screen coordinates
This translates the models relative to the current view. It does
not change the center of rotation.

Parameters:

Name	Type	Attributes	Description
`x`	`number`		Relative change in x screen coordinate
`y`	`number`		Relative change in y screen coordinate
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of a zoom animation
`fixedPath`	`Boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation *

View Source GLViewer.ts, line 4903

Example

$3Dmol.get('data/4csv.pdb', function(data) {
    viewer.addModel(data,'pdb');
    viewer.setStyle({cartoon:{},stick:{}});
    viewer.zoomTo();
    viewer.translateScene(200,50);
    viewer.rotate(90,'z'); // will no longer be around model center
    viewer.render(callback);
    });

# vibrate(numFrames, amplitude, bothWays, arrowSpec)

If atoms have dx, dy, dz properties (in some xyz files), vibrate populates each model's frame property based on parameters.
Models can then be animated

Parameters:

Name	Type	Description
`numFrames`	`number`	number of frames to be created, default to 10
`amplitude`	`number`	amplitude of distortion, default to 1 (full)
`bothWays`	`boolean`	if true, extend both in positive and negative directions by numFrames
`arrowSpec`	`ArrowSpec`	specification for drawing animated arrows. If color isn't specified, atom color (sphere, stick, line preference) is used.

View Source GLViewer.ts, line 5749

# zoom(factoropt, animationDurationopt, fixedPathopt)

Zoom current view by a constant factor

Parameters:

Name	Type	Attributes	Description
`factor`	`number`	<optional>	Magnification factor. Values greater than 1 will zoom in, less than one will zoom out. Default 2.
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of a zoom animation
`fixedPath`	`Boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation

View Source GLViewer.ts, line 4856

Example

$3Dmol.get('data/4csv.pdb', function(data) {
    viewer.addModel(data,'pdb');
    viewer.setStyle({cartoon:{},stick:{}});
    viewer.zoomTo()
    viewer.zoom(2,1000);
    viewer.render();
    });

# zoomTo(selopt, animationDurationopt, fixedPathopt)

Zoom to center of atom selection. The slab will be set appropriately for
the selection, unless an empty selection is provided, in which case there will be no slab.

Parameters:

Name	Type	Attributes	Description
`sel`	`Object`	<optional>	Selection specification specifying model and atom properties to select. Default: all atoms in viewer
`animationDuration`	`number`	<optional>	an optional parameter that denotes the duration of a zoom animation
`fixedPath`	`Boolean`	<optional>	if true animation is constrained to requested motion, overriding updates that happen during the animation *

View Source GLViewer.ts, line 4972

Example

$3Dmol.get('data/1fas.pqr', function(data){
              viewer.addModel(data, "pqr");
              $3Dmol.get("data/1fas.cube",function(volumedata){
                  viewer.addSurface($3Dmol.SurfaceType.VDW, {
                      opacity:0.85,
                      voldata: new $3Dmol.VolumeData(volumedata, "cube"),
                      volscheme: new $3Dmol.Gradient.Sinebow($3Dmol.getPropertyRange(viewer.selectedAtoms(),'charge'))
                  },{});
     
              viewer.render();
              });
              viewer.zoomTo();
            });

# static generateMeshSyncHelper(type, expandedExtent, extendedAtoms, atomsToShow, atoms, vol) → {Object}

Parameters:

Name	Type	Description
`type`	`SurfaceType`
`expandedExtent`	`Array`
`extendedAtoms`	`Array.<AtomSpec>`
`atomsToShow`	`Array.<AtomSpec>`
`atoms`	`Array.<AtomSpec>`
`vol`	`number`

View Source GLViewer.ts, line 3667

Returns:

Type: Object

# static generateSurfaceMesh(atoms, VandF, mat) → {Mesh}

Parameters:

Name	Type	Description
`atoms`	`Array.<AtomSpec>`
`VandF`	`Object`
`mat`	`MeshLambertMaterial`

View Source GLViewer.ts, line 3562

Returns:

Type: Mesh

# static getAtomsWithin(atomlist, extent) → {Array}

Parameters:

Name	Type	Description
`atomlist`	`Array.<AtomSpec>`
`extent`	`Array`

View Source GLViewer.ts, line 3433

Returns:

Type: Array

3Dmol.js

# new GLViewer()

Classes

Members

# userContextMenuHandler

# userContextMenuHandler

Methods

# addArrow(spec) → {GLShape}

Parameters:

Example

# addAsOneMolecule(data, format) → {GLModel}

Parameters:

Example

# addBox(spec) → {GLShape}

Parameters:

Example

# addCurve(spec) → {GLShape}

Parameters:

Example

# addCustom(spec) → {GLShape}

Parameters:

Example

# addCylinder(spec) → {GLShape}

Parameters:

Example

# addIsosurface(data, spec) → {GLShape}

Parameters:

Example

# addLabel(text, options, sel, noshow) → {Label}

Parameters:

Example

# addLine(spec) → {GLShape}

Parameters:

Example

# addLineDashed(spec, s)

Parameters:

# addMesh(mesh, style) → {number}

Parameters:

# addModel(data, format, options) → {GLModel}

Parameters:

Example

# addModels(data, format) → {Array.<GLModel>}

Parameters:

# addModelsAsFrames(data, format) → {GLModel}

Parameters:

Example

# addPropertyLabels(prop, sel, style)

Parameters:

# addResLabels(sel, style, byframe)

Parameters:

Example

# addShape(shapeSpec) → {GLShape}

Parameters:

# addSphere(spec) → {GLShape}

Parameters:

Example

# addStyle(sel, style)

Parameters:

Example

# addSurface(type, style, atomsel, allsel, focus, surfacecallback) → {Promise}

Parameters:

# addUnitCell(model, spec)

Parameters:

Example

# addVolumetricData(data, format, spec) → {GLShape}

Parameters:

Example

# addVolumetricRender(data, spec) → {GLShape}

Parameters:

# animate(options)

Parameters:

# apngURI(nframes) → {Promise}

Parameters:

# atomIsSelected(atom, sel) → {boolean}

Parameters:

# carveUpExtent(extent, atomlist, atomstoshow) → {Array}

Parameters:

# center(selopt, animationDurationopt, fixedPathopt)

Parameters:

Example