Class

GLViewer

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 1029

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 4636

Methods

# addArrow(spec) → {GLShape}

Create and add arrow shape

Parameters:
Name Type Description
spec ArrowSpec

Style specification

View Source GLViewer.ts, line 5248

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 5634

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 5221

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 5311

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 5429

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 5285

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 5471

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 5065

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 5331

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 5394

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

surfid

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 5583

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 5594

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 5615

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 5103

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

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:

View Source GLViewer.ts, line 5172

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 5201

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 5715

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 5876

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.

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 5348

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 5450

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 5482

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 5533

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

Promise

# atomIsSelected(atom, sel) → {boolean}

Parameters:
Name Type Description
atom AtomSpec
sel AtomSelectionSpec

View Source GLViewer.ts, line 1668

boolean

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

Parameters:
Name Type Description
extent Array
atomlist Array.<AtomSpec>
atomstoshow Array.<AtomSpec>

View Source GLViewer.ts, line 3496

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 4973

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 5925

# closeEnoughForClick(event, options)

Determine if a positioned event is "close enough" to mouseStart to be considered a click.
With a mouse, the position should be exact, but allow a slight delta for a touch interface.

Parameters:
Name Type Description
event Event
options Object

View Source GLViewer.ts, line 377

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

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 5773

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

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

string

# exportVRML()

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

View Source GLViewer.ts, line 5663

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 4946

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

Parameters:
Name Type Description
sel AtomSelectionSpec

View Source GLViewer.ts, line 1650

Array.<AtomSpec>

# getCanvas() → {HTMLCanvasElement}

Return underlying canvas element.

View Source GLViewer.ts, line 4612

HTMLCanvasElement

# getConfig()

Return configuration of viewer

View Source GLViewer.ts, line 4528

# getFrame()

Gets the current viewer frame.

View Source GLViewer.ts, line 5516

# getInternalState()

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

View Source GLViewer.ts, line 4544

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

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 5524

number

# getPerceivedDistance() → {number}

Return the z distance between the model and the camera

View Source GLViewer.ts, line 5962

distance

number

# getRenderer()

Return renderer element.

View Source GLViewer.ts, line 4618

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

Object

# getSurface(surf)

Return surface object

Parameters:
Name Type Description
surf number

surface id

View Source GLViewer.ts, line 5901

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

Array.<Object>

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

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

View Source GLViewer.ts, line 4802

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

Array.<number>

# hasVolumetricRender() → {boolean}

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

View Source GLViewer.ts, line 5490

boolean

# isAnimated() → {boolean}

Return true if viewer is currently being animated, false otherwise

View Source GLViewer.ts, line 5558

boolean

# jmolMoveTo()

return Jmol moveto command to position this scene

View Source GLViewer.ts, line 5919

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

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

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 4488

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

# pauseAnimate()

Pause animation of all models in viewer

View Source GLViewer.ts, line 5545

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

PDB string of selected atoms

string

# pngURI()

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

View Source GLViewer.ts, line 4596

# removeAllLabels()

Remove all labels from viewer

View Source GLViewer.ts, line 5140

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 5648

# removeAllShapes()

Remove all shape objects from viewer

View Source GLViewer.ts, line 5186

# removeAllSurfaces()

Remove all surfaces.

View Source GLViewer.ts, line 5914

# removeLabel(label)

Remove label from viewer

Parameters:
Name Type Description
label Label

$3Dmol label

View Source GLViewer.ts, line 5123

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 5642

# removeShape(shape)

Remove shape object from viewer

Parameters:
Name Type Description
shape GLShape

Reference to shape object to remove

View Source GLViewer.ts, line 5180

# removeSurface(surf)

Remove surface with given ID

Parameters:
Name Type Description
surf number

surface id

View Source GLViewer.ts, line 5908

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

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 4819

# replicateUnitCell(A, B, C, model, addBonds)

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.

addBonds boolean

Create bonds between unit cells based on distances.

View Source GLViewer.ts, line 5387

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 4730

# resumeAnimate()

Resume animation of all models in viewer

View Source GLViewer.ts, line 5551

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

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 4497

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

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

return list of atoms selected by sel

Parameters:
Name Type Description
sel AtomSelectionSpec

View Source GLViewer.ts, line 4847

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 5979

camera x position

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 4664

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 4590

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. The function is passed
the selected (foremost) object, the viewer, the triggering event, the associated container, and a list
of all intersecting objects with their distances from the viewer.

View Source GLViewer.ts, line 5737

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 5801

# setColorByProperty(sel, prop, scheme, range)

Parameters:
Name Type Description
sel AtomSelectionSpec
prop string
scheme Gradient | string
range object

View Source GLViewer.ts, line 5794

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

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

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

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

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 4723

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

# 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. The function has the same signature as a click handler.

unhover_callback function

function called when the mouse moves out of the hover area

View Source GLViewer.ts, line 5765

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 4553

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

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 5162

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 5970

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

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 5015

# setStateChangeCallback(callback)

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

Parameters:
Name Type Description
callback

View Source GLViewer.ts, line 4522

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

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 5894

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 4809

# setViewChangeCallback(callback)

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

Parameters:
Name Type Description
callback

View Source GLViewer.ts, line 4514

# setViewStyle(parameters)

Set global view styles.

Parameters:
Name Type Description
parameters

View Source GLViewer.ts, line 4707

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 4715

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

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 4768

# stopAnimate()

Stop animation of all models in viewer

View Source GLViewer.ts, line 5539

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

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

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 4936

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 5785

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

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 5005

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 3691

Object

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

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

View Source GLViewer.ts, line 3586

Mesh

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

Parameters:
Name Type Description
atomlist Array.<AtomSpec>
extent Array

View Source GLViewer.ts, line 3457

Array