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 or null if there are no models
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
-
pngURI()
-
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(); });