Class: GLViewer

$3Dmol. GLViewer

new GLViewer(element, callback, defaultcolors)

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

Parameters:
Name Type Description
element Object

HTML element within which to create viewer

callback function

Callback function to be immediately executed on this viewer

defaultcolors Object

Object defining default atom colors as atom => color property value pairs for all models within this viewer

Methods

addArrow(spec) → {$3Dmol.GLShape}

Create and add arrow shape

Parameters:
Name Type Description
spec ArrowSpec

Style specification

Returns:
Type
$3Dmol.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) → {$3Dmol.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)

Returns:
Type
$3Dmol.GLModel
Example

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

addCustom(spec) → {$3Dmol.GLShape}

Add custom shape component from user supplied function

Parameters:
Name Type Description
spec CustomSpec

Style specification

Returns:
Type
$3Dmol.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) → {$3Dmol.GLShape}

Create and add cylinder shape

Parameters:
Name Type Description
spec CylinderSpec

Style specification

Returns:
Type
$3Dmol.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) → {$3Dmol.GLShape}

Construct isosurface from volumetric data

Parameters:
Name Type Description
data $3Dmol.VolumeData

volumetric data

spec IsoSurfaceSpec

Shape style specification

Returns:
Type
$3Dmol.GLShape
Example
        $.get('../test_structs/benzene-homo.cube', function(data){
                 var voldata = new $3Dmol.VolumeData(data, "cube");
                 viewer.addIsosurface(voldata, {isoval: 0.01,
                                                color: "blue",
                                                alpha: 0.5,
                                                smoothness: 10});
                 viewer.addIsosurface(voldata, {isoval: -0.01,
                                                color: "red",
                                                smoothness: 5,
                                                opacity:0.5,
                                                wireframe:true,
                                                linewidth:0.1,
                                                clickable:true,
                                                callback:
                                                function() {
                                                    this.opacity = 0.0;
                                                    viewer.render(callback);
                                                }});
                 viewer.setStyle({}, {stick:{}});
                 viewer.zoomTo();
                 viewer.render();
               });

addLabel(text, options, sel) → {$3Dmol.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

Returns:
Type
$3Dmol.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) → {$3Dmol.GLShape}

Create and add line shape

Parameters:
Name Type Description
spec LineSpec

Style specification, can specify dashed, dashLength, and gapLength

Returns:
Type
$3Dmol.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();
     });

addMesh(mesh, style) → {Number}

Adds an explicit mesh as a surface object.

Parameters:
Name Type Description
mesh $3Dmol.Mesh
style Object
Returns:

surfid

Type
Number

addModel(data, format, options) → {$3Dmol.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.

Returns:
Type
$3Dmol.GLModel
Example

     viewer.setViewStyle({style:"outline"});
     $.get('volData/1fas.pqr', function(data){
         viewer.addModel(data, "pqr");
         $.get("volData/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.<$3Dmol.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)

Returns:
Type
Array.<$3Dmol.GLModel>

addModelsAsFrames(data, format) → {$3Dmol.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)

Returns:
Type
$3Dmol.GLModel

addShape(shapeSpec) → {$3Dmol.GLShape}

Add shape object to viewer

Parameters:
Name Type Description
shapeSpec ShapeSpec

style specification for label

See:
Returns:
Type
$3Dmol.GLShape

addSphere(spec) → {$3Dmol.GLShape}

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

Parameters:
Name Type Description
spec SphereSpec

Sphere shape style specification

Returns:
Type
$3Dmol.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

style AtomStyleSpec

style spec to add to specified atoms

Example
       $3Dmol.download('pdb:5IRE',viewer,{doAssembly: false},function(m) {
       viewer.addStyle({chain:'B'},{line:{}});
       viewer.zoomTo();
       viewer.render();
       });

addSurface(type, style, atomsel, allsel, focus) → {number}

Add surface representation to atoms

Parameters:
Name Type Description
type $3Dmol.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

Returns:

surfid - Identifying number for this surface

Type
number

addUnitCell(Model) → {$3Dmol.GLShape}

Create and add unit cell

Parameters:
Name Type Description
Model GLModel

with unit cell information (e.g., pdb derived).

Returns:

Line shape delineating unit cell.

Type
$3Dmol.GLShape

addVolumetricData(data, format, spec) → {$3Dmol.GLShape}

Construct isosurface from volumetric data in gaussian cube format

Parameters:
Name Type Description
data String

Input file contents

format String

Input file format (currently only supports "cube")

spec IsoSurfaceSpec

Shape style specification

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

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') and reps (numer of repetitions, 0 indicates infinite loop)

center(sel, animationDuration, fixedPath)

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

Parameters:
Name Type Argument 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 *

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();
   $.get('volData/4csv.pdb', function(data) {
     viewer.addModel(data,'pdb');
     viewer.setStyle({cartoon:{},stick:{}});
     viewer.zoomTo();
     viewer.render(callback);
   });
   
   //can't use jquery with binary data
   var req = new XMLHttpRequest();
   req.open('GET', 'volData/4csv.ccp4.gz', true);
   req.responseType = "arraybuffer";
   req.onload = function (aEvt) {      
      var voldata = new $3Dmol.VolumeData(req.response, 'ccp4.gz');
                         
     //viewer.translate(10,10);         
     //viewer.zoomTo({resn:'STI'});
     //viewer.zoom(10);
     //viewer.rotate(90,"y");
     viewer.center();
     viewer.render(callback);
   };

center(sel)

Adjust slab to fully enclose selection (default everything).

Parameters:
Name Type Argument Description
sel Object <optional>

Selection specification specifying model and atom properties to select. Default: all atoms in viewer

clear()

Clear scene of all objects

createModelFrom(sel, extract) → {$3Dmol.GLModel}

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

Parameters:
Name Type Argument Description
sel Object

Atom selection specification

extract boolean <optional>

If true, remove selected atoms from existing models

Returns:
Type
$3Dmol.GLModel

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.

Returns:
Type
string

getFrames() → {number}

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

Returns:
Type
number

getModel(id) → {GLModel}

Return specified model

Parameters:
Name Type Argument Default Description
id number <optional>
last model id

Retrieve model with specified id

Default Value:
  • Returns last model added to viewer
Returns:
Type
GLModel
Example
// Retrieve reference to first GLModel added var m =
    $.get('volData/4csv.pdb', function(data) {
     viewer.addModel(data,'pdb');
     viewer.setStyle({cartoon:{},stick:{}});
     viewer.getModel(0);
     viewer.zoomTo();
     viewer.render(callback);

   });
   
   //can't use jquery with binary data
   var req = new XMLHttpRequest();
   req.open('GET', 'volData/4csv.ccp4.gz', true);
   req.responseType = "arraybuffer";
   req.onload = function (aEvt) {      
      var voldata = new $3Dmol.VolumeData(req.response, 'ccp4.gz');
                         
     viewer.render(callback);
   };

getView() → {Array.<number>}

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

Returns:

arg

Type
Array.<number>

isAnimated() → {boolean}

Return true if viewer is currently being animated, false otherwise

Returns:
Type
boolean

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

mapAtomProperties(props,, sel)

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

pdbData(sel) → {string}

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

Parameters:
Name Type Argument Description
sel Object <optional>

Selection specification specifying model and atom properties to select. Default: all atoms in viewer

Returns:

PDB string of selected atoms

Type
string

png()

Return image URI of viewer contents (base64 encoded).

removeAllLabels()

Remove all labels from viewer

removeAllModels()

Delete all existing models

removeAllShapes()

Remove all shape objects from viewer

removeAllSurfaces()

Remove all surfaces.

removeLabel(label)

Remove label from viewer

Parameters:
Name Type Description
label $3Dmol.Label

$3Dmol label

Example
// Remove labels created in 
        $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.remove
                 viewer.render();

                 
               });

removeModel(model)

Delete specified model from viewer

Parameters:
Name Type Description
model $3Dmol.GLModel

removeShape(shape)

Remove shape object from viewer

Parameters:
Name Type Description
shape $3Dmol.GLShape

Reference to shape object to remove

removeSurface(surf)

Remove surface with given ID

Parameters:
Name Type Description
surf number

surface id

render()

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

resetContainer(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.

resize()

Resize viewer according to containing HTML element's dimensions

rotate(angle, axis, animationDuration, fixedPath)

Rotate scene by angle degrees around axis

Parameters:
Name Type Argument Description
angle number <optional>

Angle, in degrees, to rotate by.

axis string <optional>

Axis ("x", "y", or "z") to rotate around. Default "y"

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 *

Example
$.get('volData/4csv.pdb', function(data) {
 viewer.addModel(data,'pdb');
 viewer.setStyle({cartoon:{},stick:{}});
 viewer.zoomTo();
 viewer.render(callback);
    });
    
    //can't use jquery with binary data
    var req = new XMLHttpRequest();
    req.open('GET', 'volData/4csv.ccp4.gz', true);
    req.responseType = "arraybuffer";
    req.onload = function (aEvt) {      
  var voldata = new $3Dmol.VolumeData(req.response, 'ccp4.gz');
                     
 //viewer.translate(10,10);         
 //viewer.zoomTo({resn:'STI'});
 //viewer.zoom(10);
 viewer.rotate(90,"y");
 viewer.render(callback);
    };
 

selectedAtoms(sel) → {Array.<Object>}

return list of atoms selected by sel

Parameters:
Name Type Description
sel AtomSelectionSpec
Returns:
Type
Array.<Object>

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)

Example
viewer.setBackgroundColor(0x00000000);

setClickable(sel, clickable, callback)

Set click-handling properties to all selected atomsthis.

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

Example
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();

setColorByElement(sel, colors)

Parameters:
Name Type Description
sel AtomSelectionSpec
colors type

setColorByProperty(sel, prop, scheme)

Parameters:
Name Type Description
sel AtomSelectionSpec
prop type
scheme type

setFrame(framenum)

Sets the atomlists of all models in the viewer to specified frame Sets to last frame if framenum out of range

Parameters:
Name Type Description
framenum number

each model in viewer has their atoms set to this index in frames list

setHeight(h)

Set viewer height

Parameters:
Name Type Description
h number

Height in pixels

setHoverDuration(hoverDuration)

Set the duration of the hover delay

Parameters:
Name Type Argument Description
hoverDuration number <optional>

an optional parameter that denotes the duration of the hover delay (in milliseconds) before the hover action is called

setLabelStyle(label, stylespec) → {$3Dmol.Label}

Modify existing label's style

Parameters:
Name Type Description
label $3Dmol.Label

$3Dmol label

stylespec Object

Label style specification

Returns:
Type
$3Dmol.Label

setLabelText(label, text) → {$3Dmol.Label}

Modify existing label's text

Parameters:
Name Type Description
label $3Dmol.Label

$3Dmol label

text String

Label text

Returns:
Type
$3Dmol.Label

setProjection()

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.

Example
viewer.setViewStyle({style:"outline"});
     $.get('volData/1fas.pqr', function(data){
         viewer.addModel(data, "pqr");
         $.get("volData/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()

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

Parameters:
Type Description
near
far

setSlab() → {Object}

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

Returns:

near/far

Type
Object

setStyle(sel, style)

Set style properties to all selected atoms

Parameters:
Name Type Description
sel AtomSelectionSpec

Atom selection specification

style AtomStyleSpec

Style spec to apply to specified atoms

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

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

setViewStyle()

Set global view styles.

Example
viewer.setViewStyle({style:"outline"});
            $.get('volData/1fas.pqr', function(data){
                viewer.addModel(data, "pqr");
                $.get("volData/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

Parameters:
Name Type Description
w number

Width in pixels

stopAnimate()

Stop animation of all models in viewer

translate(x, y, animationDuration, fixedPath)

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

Parameters:
Name Type Argument Description
x number
y number
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 *

Example
$.get('volData/4csv.pdb', function(data) {
 viewer.addModel(data,'pdb');
 viewer.setStyle({cartoon:{},stick:{}});
 viewer.zoomTo();
 viewer.render(callback);
    });
    
    //can't use jquery with binary data
    var req = new XMLHttpRequest();
    req.open('GET', 'volData/4csv.ccp4.gz', true);
    req.responseType = "arraybuffer";
    req.onload = function (aEvt) {      
  var voldata = new $3Dmol.VolumeData(req.response, 'ccp4.gz');
                     
 viewer.translate(10,10);         
 //viewer.zoomTo({resn:'STI'});
 //viewer.zoom(10);
 //viewer.rotate(90,"y");
 viewer.render(callback);
    };

vibrate(numFrames, amplitude)

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)

zoom(factor, animationDuration, fixedPath)

Zoom current view by a constant factor

Parameters:
Name Type Argument 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

Example
 $.get('volData/4csv.pdb', function(data) {
   viewer.addModel(data,'pdb');
   viewer.setStyle({cartoon:{},stick:{}});
   viewer.zoomTo();
   viewer.render(callback);
 });
 
 //can't use jquery with binary data
 var req = new XMLHttpRequest();
 req.open('GET', 'volData/4csv.ccp4.gz', true);
 req.responseType = "arraybuffer";
 req.onload = function (aEvt) {      
    var voldata = new $3Dmol.VolumeData(req.response, 'ccp4.gz');
                       
   viewer.zoom(10);
   viewer.render(callback);
 };

zoomTo(sel, animationDuration, fixedPath)

Zoom to center of atom selection

Parameters:
Name Type Argument 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 *

Example
 

           $.get('volData/1fas.pqr', function(data){
               viewer.addModel(data, "pqr");
               $.get("volData/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();
             });