Documentation
Tutorials
Using 3Dmol within your code Embedding a 3Dmol Viewer Active Learning with 3Dmol.js Viewing Molecules with the 3Dmol Server
Github

Global

Members

# readonly CAP

Enum for cylinder cap styles.

Properties:
Name Type Description
NONE
FLAT
ROUND

View Source GLDraw.ts, line 12

number

# readonly SurfaceType

Surface types

Properties:
Name Type Description
VDW

van der Waals surface
MS

Molecular surface
SAS

Solvent accessible surface
SES

Solvent exposed surface

View Source ProteinSurface4.ts, line 32

# constant builtinColorSchemes

built in color schemes
The user can pass these strings directly as the colorscheme

Properties:
Name Type Description
ssPyMol

pymol secondary structure
ssJmol

jmol secondary structure
Jmol

jmol element defaults
amino

amino acid coloring
shapely

amino acid coloring
nucleic

nucleic acid coloring
chain

color by chain
rasmol

rasmol default element coloring
default

default element coloring
greenCarbon

default element coloring with green carbon
cyanCarbon

default element coloring with cyan carbon
magentaCarbon

default element coloring with magenta carbon
purpleCarbon

default element coloring with purple carbon
whiteCarbon

default element coloring with white carbon
orangeCarbon

default element coloring with orange carbon
yellowCarbon

default element coloring with yellow carbon
blueCarbon

default element coloring with blue carbon
chainHetatm

color chains

View Source colors.ts, line 736

Example
window.$3Dmol.download("pdb:4UAA",viewer,{},function(){
   viewer.setBackgroundColor(0xffffffff);
   var colorAsSnake = function(atom) {
     return atom.resi % 2 ? 'white': 'green'
   };
   viewer.setStyle( {chain:'A'}, { cartoon: {colorfunc: colorAsSnake }});
   viewer.setStyle( {chain:'B'}, { stick: {colorscheme: 'yellowCarbon'}});
   viewer.render();
 });

# constant elementColors

Preset element coloring - from individual element colors to entire mappings (e.g. 'elementColors.Jmol' colors atoms with Jmol stylings)

View Source colors.ts, line 336

# constant ssColors

Preset secondary structure color scheme

View Source colors.ts, line 279

boolean

# syncSurface

Render surface synchronously if true

View Source ProteinSurface4.ts, line 44

# viewers

Contains a dictionary of embedded viewers created from HTML elements
with a the viewer_3Dmoljs css class indexed by their id (or numerically
if they do not have an id).

View Source autoload.ts, line 14

Methods

# CDJSON(str, options)

This parses the ChemDoodle json file format. Although this is registered
for the json file extension, other chemical json file formats exist that
this can not parse. Check which one you have and do not assume that
.json can be parsed

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/CDJSON.ts, line 12

# CIF(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/CIF.ts, line 13

# CUBE(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/CUBE.ts, line 13

# GRO(str, options*)

Parse a gro file from str and create atoms

Parameters:
Name Type Description
str string
options* ParserOptionsSpec

View Source parsers/GRO.ts, line 14

# LAMMPSTRJ()

Parse a lammps trajectory file from str and create atoms

View Source parsers/LAMMPSTRJ.ts, line 8

# MMTFparser(bindata, ParserOptionsSpec)

Parameters:
Name Type Description
bindata

binary UInt8Array buffer or a base64 encoded string
ParserOptionsSpec

View Source parsers/MMTF.ts, line 43

# MOL2(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/MOL2.ts, line 61

# PDB(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

keepH (do not strip hydrogens), noSecondaryStructure,
assignbonds (default true, calculate implicit bonds)
(do not compute ss), altLoc (which alternate location to select, if present; '*' to load all)

View Source parsers/PDB.ts, line 15

# PQR(str, options)

Parse a pqr file from str and create atoms. A pqr file is assumed to be a
whitespace delimited PDB with charge and radius fields.

Parameters:
Name Type Description
str string
options ParserOptionsSpec

noSecondaryStructure (do not compute ss)

View Source parsers/PQR.ts, line 14

# PRMTOP(str, options)

Parse a prmtop file from str and create atoms

Parameters:
Name Type Description
str string
options ParserOptionsSpec

noSecondaryStructure (do not compute ss)

View Source parsers/PRMTOP.ts, line 14

# SDF(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/SDF.ts, line 174

# VASP(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/VASP.ts, line 10

# XYZ(str, options)

Parameters:
Name Type Description
str string
options ParserOptionsSpec

View Source parsers/XYZ.ts, line 10

# bondLength()

Get the length used for bond identification for the specified element.

View Source parsers/utils/bondLength.ts, line 16

# conversionMatrix3(a, b, c, alpha, beta, gamma) → {Matrix3}

Parameters:
Name Type Description
a number
b number
c number
alpha number
beta number
gamma number

View Source WebGL/math/utils/conversionMatrix3.ts, line 14

Matrix3

# createViewer(element, configopt) → {GLViewer}

Create and initialize an appropriate viewer at supplied HTML element using specification in config

Parameters:
Name Type Attributes Description
element Object | string

Either HTML element or string identifier
config ViewerSpec <optional>

Viewer configuration

View Source GLViewer.ts, line 4278

GLViewer, null if unable to instantiate WebGL

GLViewer
Example
var viewer = $3Dmol.createViewer(
     'gldiv', //id of div to create canvas in
     {
       defaultcolors: $3Dmol.elementColors.rasmol,
       backgroundColor: 'black'
     }
   );

# createViewerGrid(element, configopt, viewer_configopt)

Create and initialize an appropriate a grid of viewers that share a WebGL canvas

Parameters:
Name Type Attributes Description
element Object | string

Either HTML element or string identifier
config GridSpec <optional>

grid configuration
viewer_config ViewerGridSpec <optional>

Viewer specification to apply to all subviewers

View Source GLViewer.ts, line 4338

[[GLViewer]] 2D array of GLViewers

Example
var viewers = $3Dmol.createViewerGrid(
     'gldiv', //id of div to create canvas in
     {
       rows: 2,
       cols: 2,
       control_all: true  //mouse controls all viewers
     },
     { backgroundColor: 'lightgrey' }
   );
   $3Dmol.get('data/1jpy.cif', function(data) {
     var viewer = viewers[0][0];
     viewer.addModel(data,'cif');
     viewer.setStyle({sphere:{}});
     viewer.zoomTo();
     viewer.render( );

     viewer = viewers[0][1];
     viewer.addModel(data,'cif');
     viewer.setStyle({stick:{}});
     viewer.zoomTo();
     viewer.render( );

     viewer = viewers[1][0];
     viewer.addModel(data,'cif');
     viewer.setStyle({cartoon:{color:'spectrum'}});
     viewer.zoomTo();
     viewer.render( );

     viewer = viewers[1][1];
     viewer.addModel(data,'cif');
     viewer.setStyle({cartoon:{colorscheme:'chain'}});
     viewer.zoomTo();
     viewer.render();


   });

# download(query, viewer, options, callbackopt) → {GLModel}

Load a PDB/PubChem structure into existing viewer. Automatically calls 'zoomTo' and 'render' on viewer after loading model

Parameters:
Name Type Attributes Description
query string

String specifying pdb or pubchem id; must be prefaced with "pdb: " or "cid: ", respectively
viewer GLViewer

Add new model to existing viewer
options Object

Specify additional options
format: file format to download, if multiple are available, default format is pdb
pdbUri: URI to retrieve PDB files, default URI is http://www.rcsb.org/pdb/files/
callback function <optional>

Function to call with model as argument after data is loaded.

View Source utilities.ts, line 368

GLModel, Promise if callback is not provided

GLModel
Example
viewer.setBackgroundColor(0xffffffff);
       $3Dmol.download('pdb:2nbd',viewer,{onemol: true,multimodel: true},function(m) {
        m.setStyle({'cartoon':{colorscheme:{prop:'ss',map:$3Dmol.ssColors.Jmol}}});
       viewer.zoomTo();
       viewer.render(callback);
    });

# get(uri, callback)

Fetch data from URL

Parameters:
Name Type Description
uri

URL
callback

Function to call with data

View Source utilities.ts, line 317

# getbin(uri, callbackopt, requestopt, postdataopt) → {Promise}

Download binary data (e.g. a gzipped file) into an array buffer and provide
arraybuffer to callback.

Parameters:
Name Type Attributes Description
uri string

location of data
callback function <optional>

Function to call with arraybuffer as argument.
request string <optional>

type of request
postdata string <optional>

data for POST request

View Source utilities.ts, line 333

Promise

# setBondLength()

Set the length used for bond identification for the specified element.

View Source parsers/utils/bondLength.ts, line 23

Type Definitions

number | string | Colored

# ColorSpec

Color representation. A hex number, html color name, or object with r/g/b properties

View Source colors.ts, line 764

string | object

# ColorschemeSpec

Colorscheme specification.

Properties:
Name Type Attributes Description
gradient GradientType | string <optional>
min number <optional>
max number <optional>
prop string <optional>

{AtomSpec} property to use for gradient calculation. E.g., 'b' for temperature factors of a PDB.
mid number <optional>

mid point value for gradient (for rwb)
colors Array.<ColorSpec> <optional>

Custom colors for gradient (for CustomLinear)
map Record.<string, unknown> <optional>

map of a certain AtomSpec property to a color of the form {'prop': 'elem', map:elementColors.greenCarbon} Allows the user to provide a mapping of elements to colors to the colorscheme. This can be done with any properties, and not just 'elem'.
colorfunc function <optional>

Allows the user to provide a function for setting the colorschemes.
See:

View Source colors.ts, line 768