Classes
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.
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.
Methods
# addArrow(spec) → {GLShape}
Create and add arrow shape
Parameters:
Name | Type | Description |
---|---|---|
spec |
ArrowSpec
|
Style specification |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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
|
# addMesh(mesh, style) → {number}
Adds an explicit mesh as a surface object.
Parameters:
Name | Type | Description |
---|---|---|
mesh |
Mesh
|
|
style |
Object
|
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. |
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 |
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 |
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
|
|
# 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 |
Example
$3Dmol.download("mmtf:2ll5",viewer,{},function(){
viewer.setStyle({stick:{radius:0.15},cartoon:{}});
viewer.addResLabels({hetflag:false}, {font: 'Arial', fontColor:'black',showBackground:false, screenOffset: {x:0,y:0}});
viewer.zoomTo();
viewer.render();
});
# addShape(shapeSpec) → {GLShape}
Add shape object to viewer
Parameters:
Name | Type | Description |
---|---|---|
shapeSpec |
ShapeSpec
|
style specification for label |
- See:
-
- {GLShape}
# 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 |
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 |
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 |
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 |
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 |
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 |
# 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 |
# 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
|
Promise
# atomIsSelected(atom, sel) → {boolean}
Parameters:
Name | Type | Description |
---|---|---|
atom |
AtomSpec
|
|
sel |
AtomSelectionSpec
|
boolean
# 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 |
animationDuration |
number
|
<optional> |
an optional parameter that denotes |
fixedPath |
Boolean
|
<optional> |
if true animation is constrained to |
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);
});
# 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 |
# 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 |
# enableFog(fog)
Enable/disable fog for content far from the camera
Parameters:
Name | Type | Description |
---|---|---|
fog |
boolean
|
whether to enable or disable the fog |
# 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. |
string
# exportVRML()
return a VRML string representation of the scene. Include VRML header information
VRML
# fitSlab(sel)
Adjust slab to fully enclose selection (default everything).
Parameters:
Name | Type | Description |
---|---|---|
sel |
AtomSelectionSpec
|
Selection specification specifying model and atom |
# getAtomsFromSel(sel) → {Array.<AtomSpec>}
Parameters:
Name | Type | Description |
---|---|---|
sel |
AtomSelectionSpec
|
Array.<AtomSpec>
# getInternalState()
Return object representing internal state of
the viewer appropriate for passing to setInternalState
# 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
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
number
# getPerceivedDistance() → {number}
Return the z distance between the model and the camera
distance
number
# 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 |
Object
# getUniqueValues(attribute, sel) → {Array.<Object>}
Returns valid values for the specified attribute in the given selection
Parameters:
Name | Type | Description |
---|---|---|
attribute |
string
|
|
sel |
AtomSelectionSpec
|
Array.<Object>
# getView() → {Array.<number>}
Returns an array representing the current viewpoint.
Translation, zoom, and rotation quaternion.
[ 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)
boolean
# isAnimated() → {boolean}
Return true if viewer is currently being animated, false otherwise
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)
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 |
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) |
- and object or list of {x: screenX, y: screenY}
object
|
list
# 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 |
PDB string of selected atoms
string
# pngURI()
Return image URI of viewer contents (base64 encoded). *
# removeAllLabels()
Remove all labels from viewer
Example
$3Dmol.download("pdb:1ubq",viewer,{},function(){
viewer.addResLabels();
viewer.setStyle({},{stick:{}});
viewer.render( ); //show labels
viewer.removeAllLabels();
viewer.render(); //hide labels
});
# removeLabel(label)
Remove label from viewer
Parameters:
Name | Type | Description |
---|---|---|
label |
Label
|
$3Dmol label |
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
|
# removeShape(shape)
Remove shape object from viewer
Parameters:
Name | Type | Description |
---|---|---|
shape |
GLShape
|
Reference to shape object to remove |
# removeSurface(surf)
Remove surface with given ID
Parameters:
Name | Type | Description |
---|---|---|
surf |
number
|
surface id |
# 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. |
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> |
# replicateUnitCell(A, B, C, model)
Replicate atoms in model to form a super cell of the specified dimensions.
Original cell will be centered as much as possible.
Parameters:
Name | Type | Description |
---|---|---|
A |
integer
|
number of times to replicate cell in X dimension. |
B |
integer
|
number of times to replicate cell in Y dimension. If absent, X value is used. |
C |
integer
|
number of times to replicate cell in Z dimension. If absent, Y value is used. |
model |
GLModel
|
Model with unit cell information (e.g., pdb derived). If omitted uses most recently added model. |
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
# 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. |
animationDuration |
number
|
<optional> |
an optional parameter that denotes |
fixedPath |
boolean
|
<optional> |
if true animation is constrained to |
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
# screenToModelDistance()
Distance from screen coordinate to model coordinate assuming screen point
is projected to the same depth as model coordinate
# selectedAtoms(sel) → {Array.<AtomSpec>}
return list of atoms selected by sel
Parameters:
Name | Type | Description |
---|---|---|
sel |
AtomSelectionSpec
|
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
|
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) |
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 |
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 |
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
|
# setColorByProperty(sel, prop, scheme, range)
Parameters:
Name | Type | Description |
---|---|---|
sel |
AtomSelectionSpec
|
|
prop |
string
|
|
scheme |
Gradient
|
string
|
|
range |
object
|
# setConfig(c)
Set the configuration object. Note that some setting may only
have an effect at viewer creation time.
Parameters:
Name | Type | Description |
---|---|---|
c |
# 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. |
# 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
|
# 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 |
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 |
# setHoverDuration(hoverDurationopt)
Set the duration of the hover delay
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
hoverDuration |
number
|
<optional> |
an optional parameter that denotes |
# setHoverable(sel, hoverable, hover_callback, unhover_callback)
Set hoverable and callback of selected atoms
Parameters:
Name | Type | Description |
---|---|---|
sel |
AtomSelectionSpec
|
atom selection to apply hoverable settings to |
hoverable |
boolean
|
whether hover-handling is enabled for the selection |
hover_callback |
function
|
function called when an atom in the selection is hovered over |
unhover_callback |
function
|
function called when the mouse moves out of the hover area |
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 |
# setLabelStyle(label, stylespec) → {Label}
Modify existing label's style
Parameters:
Name | Type | Description |
---|---|---|
label |
Label
|
$3Dmol label |
stylespec |
LabelSpec
|
Label style specification |
Label
# setLabelText(label, text) → {Label}
Modify existing label's text
Parameters:
Name | Type | Description |
---|---|---|
label |
Label
|
$3Dmol label |
text |
String
|
Label text |
Label
# setPerceivedDistance(dist)
Set the distance between the model and the camera
Essentially zooming. Useful while stereo rendering.
Parameters:
Name | Type | Description |
---|---|---|
dist |
number
|
# 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 |
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 |
# setStateChangeCallback(callback)
Set a callback to call when the view has potentially changed.
Parameters:
Name | Type | Description |
---|---|---|
callback |
# 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 |
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 |
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 |
# setViewChangeCallback(callback)
Set a callback to call when the view has potentially changed.
Parameters:
Name | Type | Description |
---|---|---|
callback |
# setViewStyle(parameters)
Set global view styles.
Parameters:
Name | Type | Description |
---|---|---|
parameters |
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 |
# 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. |
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. |
speed |
number
|
[speed] - Speed multiplier for spinning the viewer. 1 is default and a negative |
# 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 |
# 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 |
fixedPath |
Boolean
|
<optional> |
if true animation is constrained to |
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 |
fixedPath |
Boolean
|
<optional> |
if true animation is constrained to |
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. |
# 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 |
animationDuration |
number
|
<optional> |
an optional parameter that denotes |
fixedPath |
Boolean
|
<optional> |
if true animation is constrained to |
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 |
animationDuration |
number
|
<optional> |
an optional parameter that denotes |
fixedPath |
Boolean
|
<optional> |
if true animation is constrained to |
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
|
Object
# static generateSurfaceMesh(atoms, VandF, mat) → {Mesh}
Parameters:
Name | Type | Description |
---|---|---|
atoms |
Array.<AtomSpec>
|
|
VandF |
Object
|
|
mat |
MeshLambertMaterial
|
Mesh