## GLViewer()

WebGL-based 3Dmol.js viewer
Note: The preferred method of instantiating a GLViewer is through `createViewer`

Constructor

#### # new GLViewer()

View Source GLViewer.ts, line 22

### Classes

GLViewer

# Members

#### # userContextMenuHandler

User specified function for handling a context menu event.
Handler is passed the selected object, x and y in canvas coordinates,
and original event.

View Source GLViewer.ts, line 1012

Type: `function` | `null`

#### # userContextMenuHandler

User specified function for handling a context menu event.
Handler is passed the selected object, x and y in canvas coordinates,
and original event.

View Source GLViewer.ts, line 4606

# Methods

#### # addArrow(spec) → {GLShape}

Create and add arrow shape

##### Parameters:

Name | Type | Description
--- | --- | ---
`spec` | `ArrowSpec` | Style specification

View Source GLViewer.ts, line 5218

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 5603

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 5191

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 5281

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 5398

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 5255

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 5440

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 5035

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 5301

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 5363

#### # 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 5830

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 5552

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 5563

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 5584

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 5073

#### # 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 5055

##### 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 5142

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 5171

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 5684

##### 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 5843

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 5318

##### 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 5419

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 5451

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 5502

#### # 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 4575

Returns:
Type: `Promise`

#### # atomIsSelected(atom, sel) → {boolean}

##### Parameters:

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

View Source GLViewer.ts, line 1651

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 3475

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 4943

##### 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 5892

#### # 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 5643

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 5740

#### # 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 5467

#### # 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 5626

Returns:
Type: `string`

#### # exportVRML()

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

View Source GLViewer.ts, line 5632

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 4916

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

##### Parameters:

Name | Type | Description
--- | --- | ---
`sel` | `AtomSelectionSpec` |

View Source GLViewer.ts, line 1633

Returns:
Type: `Array.<AtomSpec>`

#### # getCanvas() → {HTMLCanvasElement}

Return underlying canvas element.

View Source GLViewer.ts, line 4582

Returns:
Type: `HTMLCanvasElement`

#### # getConfig()

Return configuration of viewer

View Source GLViewer.ts, line 4498

#### # getFrame()

Gets the current viewer frame.

View Source GLViewer.ts, line 5485

#### # getInternalState()

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

View Source GLViewer.ts, line 4514

#### # 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 4722

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 5493

Returns:
Type: `number`

#### # getPerceivedDistance() → {number}

Return the z distance between the model and the camera

View Source GLViewer.ts, line 5929

Returns:

distance

Type: `number`

#### # getRenderer()

Return renderer element.

View Source GLViewer.ts, line 4588

#### # 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 4995

Returns:
Type: `Object`

#### # getSurface(surf)

Return surface object

##### Parameters:

Name | Type | Description
--- | --- | ---
`surf` | `number` | surface id

View Source GLViewer.ts, line 5868

#### # 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 4827

Returns:
Type: `Array.<Object>`

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

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

View Source GLViewer.ts, line 4772

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 5459

Returns:
Type: `boolean`

#### # isAnimated() → {boolean}

Return true if viewer is currently being animated, false otherwise

View Source GLViewer.ts, line 5527

Returns:
Type: `boolean`

#### # jmolMoveTo()

return Jmol moveto command to position this scene

View Source GLViewer.ts, line 5886

#### # 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 5922

#### # 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 5913

##### 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 4458

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 5514

#### # 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 4836

Returns:

PDB string of selected atoms

Type: `string`

#### # pngURI()

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

View Source GLViewer.ts, line 4566

#### # removeAllLabels()

Remove all labels from viewer

View Source GLViewer.ts, line 5110

##### 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 5617

#### # removeAllShapes()

Remove all shape objects from viewer

View Source GLViewer.ts, line 5156

#### # removeAllSurfaces()

Remove all surfaces.

View Source GLViewer.ts, line 5881

#### # removeLabel(label)

Remove label from viewer

##### Parameters:

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

View Source GLViewer.ts, line 5093

##### 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 5611

#### # removeShape(shape)

Remove shape object from viewer

##### Parameters:

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

View Source GLViewer.ts, line 5150

#### # removeSurface(surf)

Remove surface with given ID

##### Parameters:

Name | Type | Description
--- | --- | ---
`surf` | `number` | surface id

View Source GLViewer.ts, line 5875

#### # 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 5335

##### 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 4789

#### # 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 5356

##### 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 4700

#### # resumeAnimate()

Resume animation of all models in viewer

View Source GLViewer.ts, line 5520

#### # 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 4764

##### 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 4467

#### # 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 4476

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

return list of atoms selected by sel

##### Parameters:

Name | Type | Description
--- | --- | ---
`sel` | `AtomSelectionSpec` |

View Source GLViewer.ts, line 4817

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 5946

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 4634

##### 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 4560

##### 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 5704

##### 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 5768

#### # setColorByProperty(sel, prop, scheme, range)

##### Parameters:

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

View Source GLViewer.ts, line 5761

#### # 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 4506

#### # 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 4616

#### # 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 5955

#### # 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 5478

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 4693

#### # 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 4599

#### # 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 5732

##### 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 4523

#### # 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 5121

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 5132

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 5937

#### # 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 4658

##### 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 4985

#### # setStateChangeCallback(callback)

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

##### Parameters:

Name | Type | Description
--- | --- | ---
`callback` |  |

View Source GLViewer.ts, line 4492

#### # 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 5666

##### 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 5861

##### 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 4779

#### # setViewChangeCallback(callback)

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

##### Parameters:

Name | Type | Description
--- | --- | ---
`callback` |  |

View Source GLViewer.ts, line 4484

#### # setViewStyle(parameters)

Set global view styles.

##### Parameters:

Name | Type | Description
--- | --- | ---
`parameters` |  |

View Source GLViewer.ts, line 4677

##### 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 4685

#### # 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 4541

##### 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 4738

#### # stopAnimate()

Stop animation of all models in viewer

View Source GLViewer.ts, line 5508

#### # 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 4451

#### # 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 4882

##### 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 4906

##### 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 5752

#### # 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 4859

##### 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 4975

##### 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 3670

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 3565

Returns:
Type: `Mesh`

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

##### Parameters:

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

View Source GLViewer.ts, line 3436

Returns:
Type: `Array`