Introduction Technology Usage |-- Initialization |-- Load PDB |-- Interaction |-- Main & Het Structure |-- Representation Mode |-- Color Mode |-- Label |-- Fragment |-- Measure |-- Tools |-- Pickup |-- Configuration |-- Color Scheme |-- Sequence |-- Information Extention |-- Using <iframe> in HTML |-- Using JavaScript |-- Using WebView Component Limitation API FAQ Example

User Manual of Web3DMol

Introduction

Web3DMol is an application used for displaying 3D structure of proteins on web browsers.

PDB files
3D structure graphics as well as other important information

Technology

·Constructed with HTML, CSS and JavaScript ( totally client-side technology, no server-side languages involved ).
·WebGL is applied in order to gain GPU acceleration.
·Supported by most modern browsers.

BrowsersSupport VersionSupport Since
Chrome8.0+Dec 02, 2010
Firefox4.0+Mar 22, 2011
Safari5.1+Jul 20, 2011
Opera12.1+Nov 05, 2012
Internet ExplorerEdgeJul 29, 2015
iOS Safari8.0+Sep 17, 2014
Opera MiniNot Supported-
Opera Mobile37+Sep 23, 2016
Android WebViewChromium 56+Feb 01, 2017
Chrome for Android57+Mar 27, 2017
Firefox for Android52+Mar 27, 2017

Usage

Initialization

Three ways to initialize Web3DMol :

1. Visit https://web3dmol.net
2. Download source code, unzip and double-click index.html
3. Embed Web3DMol into other applications, then initialize the application.

Load PDB

Load from RCSB
Input PDB-ID in Omnibox, then press ENTER key or click GO button.

Load from Local File System
1. Click Load button, then select a pdb file from local file system.
2. Simply drag a pdb file from local file system and drop it into Web3DMol interface.
( NOTE : Local pdb file will NOT be uploaded, don't worry. )

Interaction



Press & hold LEFT mouse, then move.
Press & hold RIGHT mouse, then move.
Scroll UP to zoom in; scroll DOWN to zoom out.
Click RIGHT mouse on the 3D structure.
Click LEFT mouse on the 3D structure.
( A measurement must be started before left-click takes effect. )

Main & Het Structure

There are two different kinds of atom recorded in PDB files.

ATOMStandard amino acids and nucleotides.
HETATMNon-standard residues, such as prosthetic groups, inhibitors, solvent molecules and ions.


Representation Mode

Representation mode can be adjusted in Representation Plane.

Show nothing.
Atom are shown as dots.
Atoms are connected by line according to residues' molecular structure.
Atoms in the main chain are connected by tubes.
Residues are connected along the main chain by tubes.
Residues are connected along the main chain according to secondary structure.
By default, α-helix and β-sheet are connected by cubes, random coils are connected by tubes.
Residues are connected along the main chain by tubes.
Tube's radius varies according to the B-factor (temperature factor).
Residues are connected along the main chain by cubes.
The connector's cross section is rectangle.
Residues are connected along the main chain.
The connector's cross section is like a playground racetrack.
Residues are connected along the main chain.
The connector's cross section is oval.
Residues are connected along the main chain.
The connector's cross section is like a dumbbell.
The first and last residue are connected by a straight tube.
The radius of tube is much fatter than radius in Tube Mode.
( NOTE : Only available for α-helix in Cartoon Mode. )
Residues are connected along the main chain by cubes.
The width of cube at last residue varies to make an arrowhead.
( NOTE : Only available for β-sheet in Cartoon Mode. )
Atoms are connected by tube according to residues' molecular structure.
Atoms are shown as spheres.
The radius of spheres varies according to atoms' van der Waals radius.
Atoms are shown as spheres and connected by thin rods.
( NOTE : Only available for Het Structure or Single Residue. )

Color Mode

Color mode can be adjusted in Color Plane.
Color Scheme ( see Color Scheme department ) can be adjusted in Configuration Plane.

Color by element.
Color by residue.

Color by the secondary structure.
Color by chain identifier.
Color by representation modes.
Color as a spectrum according to B-Factor.
B-Factor : high -> low ~ Color : red/orange -> blue/purple.
( For those b-factor is not recorded, green color will be used. )
Color as a spectrum according to atoms' serial number.
Serial number : little -> great ~ Color : red/orange -> blue/purple.
Color as a spectrum according to residues' sequence number in a chain.
Sequence number : little(N-end) -> great(C-end) ~ Color : red/orange -> blue/purple.
Color as a spectrum according to residues' hydrophobicity
Hydrophobicity : Hydrophobic -> Hydrophilic ~ Color : red -> blue.
Color by user.
( NOTE : Only available in Fragments Customization. )

Label

There are two dimensions for label:

What will be labeled.
What will be labeled with.

Label Area & Label Content can be adjusted in Label Plane.
Label's color and size can be adjusted in Configuration Plane.

Label Area

Label nothing.
Label every atom.
Label atoms in the main chain.
Label representative atom of every residue.
Label the first atom of every chain.
Label the first atom of the molecule.

Label Content

Label with atom name. ( eg. Ca )
Label with atom serial number. ( eg. 20 )
Label with atom name and atom serial number. ( eg. Ca-20 )
Label with element name. ( eg. C )
Label with element name and atom serial number. ( eg. C-20 )
Label with residue name. ( eg. Tyr )
Label with residue sequence number. ( eg. 2 )
Label with residue name and residue sequence number. ( eg. Try45 )
Label with chain identifier. ( eg. A )
Label with chain identifier, residue name and residue sequence number. ( eg. A.Try45 )
Label with chain identifier and residue sequence number. ( eg. A.45 )
Label with chain identifier, residue name, residue sequence number and atom name. ( eg. A.Try45-Ca )
Label with the atom's occupancy recorded in PDB file. ( eg. 1.00 )
Label with the atom's b-factor recorded in PDB file. ( eg. 50.00 )
Label with the atom's van der Waals radius. ( eg. 1.70 )

Fragment

A fragment is a segment of a chain in a molecule.
Fragments can be added, highlighted and hidden in Fragment Plane.
Fragments can be customized and deleted in Fragment Dialog.

How to add a fragment ? ( Three ways )

1. Click Add Fragment button in Fragment Plane.



2. Click Fragment checkboxes in Pickup Dialog to add the chain, residue or secondary structure as fragments.



3. Hover above the Sequence Dialog to recognize a piece of sequence, then Press and Hold left mouse for a few seconds.



Customization Option

A fragment has its own representation mode, color mode, label area and label content, which can be customized by users in Fragment Dialog

The chain identifier of a fragment.
The first residue of a fragment.
The last residue of a fragment.
The representation mode of a fragment.
The color mode of a fragment. User-defined color is available.
The label area of a fragment.
The label content of a fragment.

Highlight, Hide & Delete

LEFT click the banner of Fragment List in Fragment Plane
RIGHT click the banner of Fragment List in Fragment Plane
Click Delete button in Fragment Dialog

Measure

User can measure Distance, Vector Angle, Dihedral Angle and Triangle Area in Measure Plane

Processes of Measurement

Click Add Measurement button in Measure Plane.
Left click the 3D structure to pick atoms by the order of A, B, C and D.
When points are enough, the result will be calculated and show in Measurement Box.
Guide lines and Result label will be added to 3D structure graphics.
Points can be repicked by clicking [ Repick ] in Measurement Box.
Click the banner of Measurement Box to show / hide this measurement's guide lines.
Other adjustment options can be found in Configuration Plane - Misc Category.

Tools

Several tools are available in Tool Plane.

Extra Structure
Some extra structures can be added into canvas, including:
Disulfide bondsThe disulfide bonds between cysteines.
Cell unitThe cell unit in crystallography.
Water moleculesThe water molecules in Het structure.

Animation
3D structure in canvas can rotate by X, Y, Z axes automatically.
The speed of rotation can be adjusted in Configuration Plane - Misc Category.

Snapshot
3D structure in canvas can be saved as PNG / JPG / BMP pictures.

Share
Click Share URL and copy the URL shown in Share Dialog.
Pass this URL to others or embed it into a web page.

Pickup

Users can pick atoms by RIGHT clicking the 3D structure.

·Some information about the picked atom is listed in a pop-up dialog, including PDB-ID, chain identifier, residue, secondary structure, atom's serial number, name, coordinate, occupation and b-factor.
·Ball-Rod structure of the residue can be shown by clicking Show Ball-Rod Structure of Residue button in the dialog.
·The chain, residue and secondary structure can be highlighted or hidden by clicking Highlight / Hide checkboxes in the dialog.
·The chain, residue and secondary structure can be added to a fragment by clicking Fragment checkboxes in the dialog.


Configuration

Default configurations can be adjusted in Configuration Plane.

Following configurations are listed by this format:
Configuration KeyConfiguration Description

Geometry

geom_mol_sizeThe initial size of 3D structure
geom_dot_sizeSize of point in Dot Rep.
geom_dot_as_crossShow cross instead of point in Dot Rep.
geom_cross_radiusRadius of cross in Dot Rep.
geom_dash_gapGap width of dash line
geom_backbone_as_tubeUse tubes instead of lines to connect atoms in Backbone Rep.
geom_tube_smoothUse smooth curve instead of polygonal lines in Tube Rep.
geom_tube_radiusRadius of tube in Tube Rep. & Cartoon Rep.
geom_tube_roundUse spheres instead of plains at each ends of the tube in Tube Rep.
geom_stick_radiusRadius of tube in Stick Rep.
geom_stick_roundUse spheres instead of plains at each ends of the tube in Stick Rep.
geom_helix_modeThe representation mode of α-helix in Cartoon Rep.
geom_helix_side_differFill the side face of α-helix with different color in Cartoon Rep.
geom_helix_side_colorThe different color for side face of α-helix in Cartoon Rep.
geom_helix_inner_differFill the inner face of α-helix with different color in Cartoon Rep.
geom_helix_inner_colorThe different color for inner face of α-helix in Cartoon Rep.
geom_sheet_modeThe representation mode of β-sheet in Cartoon Rep.
geom_sheet_flatFlatten the β-sheet in Cartoon Rep.
geom_sheet_side_differFill the side face of β-sheet with different color in Cartoon Rep.
geom_sheet_side_colorThe different color for side face of β-sheet in Cartoon Rep.
geom_loop_modeThe representation mode of random coil in Cartoon Rep.
geom_putty_radius_minThe minimum radius of tube in Cartoon-Putty Rep.
geom_putty_radius_maxThe maximum radius of tube in Cartoon-Putty Rep.
geom_cube_widthThe width of the cross section in Cartoon-Cube Rep.
geom_cube_heightThe height of the cross section in Cartoon-Cube Rep.
geom_cube_side_differFill the side face with different color in Cartoon-Cube Rep.
geom_cube_side_colorThe different color for side face in Cartoon-Cube Rep.
geom_strip_widthThe width of the cross section in Cartoon-Strip Rep.
geom_strip_heightThe height of the cross section in Cartoon-Strip Rep.
geom_strip_side_differFill the side face with different color in Cartoon-Strip Rep.
geom_strip_side_colorThe different color for side face in Cartoon-Strip Rep.
geom_ribbon_widthThe width of the cross section in Cartoon-Ribbon Rep.
geom_ribbon_heightThe height of the cross section in Cartoon-Ribbon Rep.
geom_ribbon_side_heightThe height of the side face in Cartoon-Ribbon Rep.
geom_ribbon_side_differFill the side face with different color in Cartoon-Ribbon Rep.
geom_ribbon_side_colorThe different color for side face in Cartoon-Ribbon Rep.
geom_railway_widthThe width of the cross section in Cartoon-Railway Rep.
geom_railway_heightThe height of the cross section in Cartoon-Railway Rep.
geom_railway_radiusThe radius of the side track in Cartoon-Railway Rep.
geom_railway_side_differFill the side track with different color in Cartoon-Railway Rep.
geom_railway_side_colorThe different color for side track in Cartoon-Railway Rep.
geom_arrow_widthThe width of the cross section in Cartoon-Arrow Rep.
geom_arrow_heightThe height of the cross section in Cartoon-Arrow Rep.

geom_arrowhead_lowerThe width of arrowhead trapezoid's lower face in Cartoon-Arrow Rep.

geom_arrowhead_upperThe width of arrowhead trapezoid's upper face in Cartoon-Arrow Rep.
geom_arrow_side_differFill the side face with different color in Cartoon-Arrow Rep.
geom_arrow_side_colorThe different color for side face in Cartoon-Arrow Rep.
geom_cylinder_radiusThe radius of tube in Cartoon-Cylinder Rep.
geom_cylinder_round_endUse spheres instead of plains at each ends of the tube in Cartoon-Cylinder Rep.
geom_cylinder_end_differFill the end face with different color in Cartoon-Cylinder Rep.
geom_cylinder_end_colorThe different color for end face in Cartoon-Cylinder Rep.
geom_sphere_radiusThe radius of sphere in Common Reps., rather than Sphere Rep.
geom_ball_radiusThe radius of ball in Ball & Rod Rep.
geom_rod_radiusThe radius of rod in Ball & Rod Rep.

Smooth

smooth_segmentThe segment number between two guide points in smooth curve path.
( NOTE : Increase this option's value will make nicer graphics but consume more computational resources. )
smooth_curvatureThe curvature of smooth curve path.
( NOTE : Increase this option’s value will make the path more twisting. )

Color

Default color scheme can be modified in this category.
( also see Color Scheme department )

Light

light_enableEnable light effect
light_modeThe mode of light effect ( 1 : Point Light / 2 : Parallel Light )
light_positionThe position of point light. ( Only available for Point Light Mode )
light_directionThe direction of parallel light. ( Only available for Parallel Light Mode )
light_colorThe color of light
light_ambientThe color of ambient light

Fog

fog_enableEnable fog effect
fog_modeThe mode of fog effect ( 1 : Linear / 2 : Exponential )
fog_startThe distance from the camera where the fog starts ( fog concentrations: 0% )
fog_stopTThe distance from the camera where the fog stops (fog concentration: 100% )
fog_colorThe color of fog
fog_densityThe density of fog ( Only available for Exponential Fog Mode )

Material

material_ambientMaterial's weighting coefficient of ambient light
material_diffuseMaterial's weighting coefficient of diffuse light
material_specularMaterial's weighting coefficient of specular light
material_shininessMaterial's shininess exponent of specular light

Label

label_sizeFont size of label
label_colorColor of label

Speed

rotate_speedSpeed of rotation movement while mouse interaction
zoom_speedSpeed of zoom movement while mouse interaction
pan_speedSpeed of translation movement while mouse interaction
animation_speedSpeed of rotation movement while animation

Misc

bgBackground color of the canvas
show_measurementShow guide lines and measurement result in canvas.
measure_line_colorColor of guide lines in measurement
measure_angle_in_radianUse radian instead of degree in measurement.
label_ball_and_rodLabel every atom of Ball & Rod Rep. in fragments customization.

Local Storage

If local storage is enabled, next time you initialize Web3DMol, configuration values saved at local storage will take place of default one.

Recover the default configuration values
Save current configuration values to local storage
Recover configuration values from local storage
Clear configuration values saved at local storage

Representation Mode ( listed in Representation Plane )

( also see Representation Department )

rep_mode_mainRepresentation Mode for Main Structure
rep_mode_hetRepresentation Mode for Het Structure

NOTE : values are limited in following integers
100 ( Hide ) 101 ( Dot ) 102 ( Line ) 103 ( Backbone ) 104 ( Tube ) 105 ( Cartoon ) 106 ( Cartoon - Putty ) 107 ( Cartoon - Cube ) 108 ( Cartoon - Strip ) 109 ( Cartoon - Ribbon ) 110 ( Cartoon - Railway ) 111 ( Cartoon - Arrow ) 112 ( Cartoon - Cylinder ) 113 ( Stick ) 114 ( Sphere ) 115 ( Ball & Rod )

Color Mode ( listed in Color Plane )

( also see Color Department )

color_mode_mainColor Mode for Main Structure
color_mode_hetColor Mode for Het Structure

NOTE : values are limited in following integers
601 ( By Element ) 602 ( By Residue ) 603 ( By Secondary Structure ) 604 ( By Chain ) 605 ( By Representation ) 606 ( By B-Factor ) 607 ( By Spectrum ) 608 ( By Chain Spectrum ) 609 ( By Hydrophobicity )

Label Area ( listed in Label Plane )

( also see Label Department )

label_area_mainLabel Area for Main Structure
label_area_hetLabel Area for Het Structure

NOTE : values are limited in following integers
700 ( Label None ) 701 ( Label Every Atom ) 702 ( Label Backbone ) 703 ( Label Every Residue ) 704 ( Label Every Chain ) 705 ( Label Molecule )

Label Content ( listed in Label Plane )

( also see Label Department )

label_content_mainLabel Content for Main Structure
label_content_hetLabel Content for Het Structure

NOTE : values are limited in following integers
711 ( Atom name ) 712 ( Atom id ) 713 ( Atom name & id ) 721 ( Element ) 722 ( Element & id ) 731 ( Residue name ) 732 ( Residue id ) 733 ( Residue name & id ) 741 ( Chain id ) 742 ( Chain & Residue ) 743 ( Chain & Residue id ) 744 ( Mix Info ) 751 ( Occupancy ) 752 ( B-Factor ) 753 ( van der Waals Radius )

Color Scheme

Color mode can be adjusted in Color Plane. ( also see Color Mode department )
Color Scheme can be adjusted in Configuration Plane.

For developers, Color Scheme can be redefined by modifying the color value in URL or passing the user_color argument in w3m.api.init() function. ( also see Extension department )

Color Scheme are listed by this format:
Color IndexColor Value
( NOTE : Color Value is a JavaScript Array, like [ 1.000, 1.000, 1.000 ], representing Red, Green, Blue color channels. Each channel must be normalized between 0 ~ 1. )

Special

1[ 0.750 , 0.780 , 0.790 ]
2[ 1.000 , 1.000 , 0.000 ]
11[ 0.790 , 0.410 , 0.140 ]
12[ 0.750 , 0.750 , 0.750 ]
13[ 0.750 , 0.750 , 0.750 ]
14[ 0.790 , 0.410 , 0.140 ]
15[ 0.790 , 0.410 , 0.140 ]
16[ 0.790 , 0.410 , 0.140 ]
17[ 0.790 , 0.410 , 0.140 ]
18[ 0.790 , 0.410 , 0.140 ]
19[ 0.790 , 0.410 , 0.140 ]

Color for Element

101[ 0.200 , 1.000 , 0.200 ]
102[ 1.000 , 0.300 , 0.300 ]
103[ 0.180 , 0.180 , 0.930 ]
104[ 1.000 , 0.560 , 0.000 ]
105[ 0.820 , 0.820 , 0.820 ]
106[ 0.790 , 0.410 , 0.140 ]
107[ 1.000 , 0.275 , 0.122 ]
108[ 0.086 , 0.663 , 0.318 ]
109[ 0.020 , 0.467 , 0.282 ]
110[ 1.000 , 0.945 , 0.263 ]
111[ 0.267 , 0.808 , 0.965 ]
112[ 0.800 , 0.643 , 0.890 ]
113[ 0.859 , 0.353 , 0.400 ]
114[ 0.086 , 0.522 , 0.663 ]
115[ 0.129 , 0.651 , 0.459 ]
116[ 0.851 , 0.714 , 0.067 ]
117[ 0.553 , 0.294 , 0.733 ]
118[ 0.553 , 0.294 , 0.733 ]

Color for Residue

201[ 1.000 , 0.275 , 0.122 ]
202[ 1.000 , 0.702 , 0.655 ]
203[ 0.859 , 0.353 , 0.400 ]
204[ 1.000 , 0.129 , 0.129 ]
205[ 1.000 , 0.278 , 0.467 ]
206[ 0.749 , 0.141 , 0.165 ]
207[ 0.267 , 0.808 , 0.965 ]
208[ 0.439 , 0.953 , 1.000 ]
209[ 0.086 , 0.522 , 0.663 ]
210[ 0.086 , 0.663 , 0.318 ]
211[ 0.000 , 0.737 , 0.071 ]
212[ 0.129 , 0.651 , 0.459 ]
213[ 0.000 , 0.898 , 0.000 ]
214[ 0.588 , 0.808 , 0.329 ]
215[ 0.020 , 0.467 , 0.282 ]
216[ 1.000 , 0.945 , 0.263 ]
217[ 1.000 , 0.651 , 0.192 ]
218[ 0.800 , 0.643 , 0.890 ]
219[ 0.298 , 0.133 , 0.106 ]
220[ 0.553 , 0.294 , 0.733 ]
221[ 0.000 , 0.204 , 0.447 ]
222[ 0.851 , 0.714 , 0.067 ]
223[ 0.459 , 0.259 , 0.400 ]
224[ 0.231 , 0.180 , 0.494 ]
225[ 0.294 , 0.361 , 0.769 ]
226[ 0.886 , 0.612 , 0.271 ]
227[ 0.549 , 0.263 , 0.337 ]
228[ 0.667 , 0.298 , 0.561 ]

Color for Secondary Structure

301[ 1.000 , 0.000 , 0.000 ]
302[ 1.000 , 1.000 , 0.000 ]
303[ 0.000 , 1.000 , 0.000 ]

Color for Chain

401[ 0.200 , 1.000 , 0.200 ]
402[ 1.000 , 0.300 , 0.300 ]
403[ 0.180 , 0.180 , 0.930 ]
404[ 1.000 , 0.560 , 0.000 ]
405[ 0.540 , 0.360 , 0.540 ]
406[ 0.790 , 0.410 , 0.140 ]
407[ 0.820 , 0.820 , 0.820 ]
408[ 0.086 , 0.522 , 0.663 ]
409[ 1.000 , 0.651 , 0.192 ]
410[ 0.298 , 0.133 , 0.106 ]
411[ 0.859 , 0.353 , 0.400 ]
412[ 0.086 , 0.522 , 0.663 ]
413[ 0.086 , 0.522 , 0.663 ]
414[ 0.851 , 0.714 , 0.067 ]

Color for Representation Mode

501[ 1.000 , 0.000 , 0.000 ]
502[ 0.000 , 1.000 , 0.000 ]
503[ 0.000 , 0.000 , 1.000 ]
504[ 1.000 , 1.000 , 0.000 ]
505[ 1.000 , 0.000 , 1.000 ]
506[ 0.000 , 1.000 , 1.000 ]
507[ 1.000 , 0.275 , 0.122 ]
508[ 0.267 , 0.808 , 0.965 ]
509[ 0.086 , 0.663 , 0.318 ]
510[ 1.000 , 0.945 , 0.263 ]
511[ 0.800 , 0.643 , 0.890 ]
512[ 0.282 , 0.753 , 0.639 ]
513[ 1.000 , 0.776 , 0.667 ]
514[ 0.420 , 0.482 , 0.431 ]

Sequence

A sequence plot is shown in Sequence Plane.

Secondary Structure in Sequence Plot

shown as small red cylinders.
shown as small green arrows.
shown as thin blue strips.
( NOTE : Secondary structures and single residues will be recognized automatically when mouse hovering over the sequence plot. )

Highlight, Hide & Fragment

Hover to recognize a segment, then:
Left click to highlight.
Right click to hide.
Press & Hold Left mouse for a few seconds to add the recognized segment as a fragment.

Information

Some important information dug out from PDB files is listed in Information Plane.

Including :
Molecular Classification, Title of Experiment, Technique of Experiment, Source of Organism, Structural Resolution, Publication, Author etc.

RCSB PDB link of the molecule, PubMed Link and DOI Link of the publication are available in Link Category.

Extension

Web3DMol can be embedded into other applications.

A typical URL

https://web3dmol.net/?id=xxxx&widget=x&config=xxxxxx&color=xxxxxx

requiredPDB-id of the molecule to be shown in canvas.
optionalShow the widgets in canvas. ( 0 : do not show; 1 : show )
optionalModified configuration values. ( using JSON string )
optionalModified color values. ( using JSON string )

Configuration values & Color values can be modified to customize the 3D structure graphics.
Configuration keys are listed in Configuration Department in this manual.
Color index are listed in Color Scheme Department in this manual.

Firstly,
Configuration values & Color values must be formatted as JSON String
We recommend using JSON Tools to produce JSON String, such as JSON.stringify() in JavaScript.

Configurations :
Format : { "configuration_key" : configuration_value }
Example : { "rep_mode_main" : 105, "color_mode_main" : 602, "bg" : [ 1.0, 1.0, 1.0, 0.0 ] }
Colors :
Format : { "color_index" : color_value }
Example : { "1" : [ 0.5, 0.5, 0.5 ], "102" : [ 0.8, 0.8, 0.8 ] }

Next,
Encode the JSON String with URL Encode Tools, such as encodeURIComponent() in JavaScript.

The encoded Configuration values will be like :
%7B%22rep_mode_main%22%3A105%2C%22color_mode_main%22%3A602%2C%22bg%22%3A%5B1%2C1%2C1%2C0%5D%7D
The encoded Color values will be like :
%7B%221%22%3A%5B0.5%2C0.5%2C0.5%5D%2C%22102%22%3A%5B0.8%2C0.8%2C0.8%5D%7D

Finally,
The URL will be like :
https://web3dmol.net/?id=1mbs&widget=0&config=%7B%22rep_mode_main%22%3A105%2C%22color_mode_main%22%3A602%2C%22bg%22%3A%5B1%2C1%2C1%2C0%5D%7D&color=%7B%221%22%3A%5B0.5%2C0.5%2C0.5%5D%2C%22102%22%3A%5B0.8%2C0.8%2C0.8%5D%7D

Using <iframe> in HTML

The typical code :

<iframe width=800 height=500 src="{ the url }" frameborder=0 allowfullscreen></iframe>

Obviously, the value of "src" should be replaced by a new URL, and the values of "width" and "height" could be modified in order to fit the whole layout of your web page.

Using JavaScript

Web3DMol's Library must be loaded into your application at first.
Online Library URL -> https://web3dmol.net/lib/web3dmol.js
We recommend developers to download Web3DMol source code and make it a part of your own application to enhance response speed.

The initialization function is defined like :
w3m.api.init(div_id, pdb_id, show_widget, user_config, user_color)

requiredID of the container node for Web3DMol in a web page.
requiredPDB-id of the molecule to be shown in canvas.
optionalShow the widgets in canvas. ( 0 : do not show; 1 : show )
optionalModified configuration values. ( using JavaScript Object )
optionalModified color values. ( using JavaScript Object )

user_config & user_color and both JavaScript Object rather than JSON String.

The typical code :

<script type="text/javascript" src="https://web3dmol.net/lib/web3dmol.js"></script>
<script type="text/javascript">
w3m.api.init('app', '1r6a', 1, { user_config }, { user_color });
</script>

Using WebView Component

In desktop environment, a WebView Component must be used to embed Web3DMol.
For example, in Qt, QtWebView is the WebView Component. Developers can set the url attribute of a WebView component with URL we used above, and ensure that the JavaScript Engine in on.
By this way, we can easily embed Web3DMol into a desktop application.

Limitation

3D modeling and rendering are both resource-intensive calculations, and as a form of interpreted language, JavaScript is not good at high efficiency calculations. Therefore, when the size of a molecule becomes very large, Web3DMol sacrifices some graphical quality to maintain the efficiency. Another restriction is from web browser manufacturers. For example, V8, the JavaScript engine in Google Chrome, has a threshold for maximum heap memory usage, so that when the number of atoms is too large, Chrome will crash. In fact, for very large molecules, RCSB PDB does not offer common PDB archives to download. Instead, structural data are recorded in a more complicated format such as mmCIF. Under these conditions, we recommend use of desktop software, for example PyMOL, whose modeling and rendering algorithms are written in C++ (a compiled language).

JavaScript was originally designed for web page interaction, and its function libraries are not abundant. Therefore, it is difficult for Web3DMol to handle PDB archives if they are in zipped format or to record a small movie while users are manipulating the 3D structure.

The support for WebGL from mobile devices is uneven. Web3DMol runs well on some of the latest cellphones, but not very smoothly on most mobile devices at present. The memory capacity, the performance of microchips and the touch-based interactions limit the user experience of Web3DMol on mobile devices.

API

APIs are for developers who use JavaScript to embed Web3DMol into their applications.

w3m.api.init(div_id, pdb_id, show_widget, user_config, user_color)

Initialize Web3DMol.
requiredID of the container node for Web3DMol in a web page.
requiredPDB-id of the molecule to be shown in canvas.
optionalShow the widgets in canvas. ( 0 : do not show; 1 : show )
optionalModified configuration values. ( using JavaScript Object )
optionalModified color values. ( using JavaScript Object )

w3m.api.config(key, value)

Set or Get configuration.
if value is undefined, get and return the configuration value, if value is defined, set the configuration value. ( also see Configuration department )
requiredThe configuration key.
optionalThe configuration value.

w3m.api.rgb(index, value)

Set or Get color.
if value is undefined, get and return the color value, if value is defined, set the color value. ( also see Color Scheme department )
requiredThe color index in color scheme.
optionalThe color value. ( a JS array )

w3m.api.refresh()

Refresh the background and the graphics.

w3m.api.pdb(source)

Load a PDB file from a PDB-ID or a local file.
requiredA PDB id or a file user selected from <input type="file" />

w3m.api.representation(structure, mode)

Switch the representation mode.
required1 : main structure; 2 : het structure
requiredSee Configuration department - Representation category.

w3m.api.color(structure, mode)

Switch the color mode.
required1 : main structure; 2 : het structure
requiredSee Color Scheme department.

w3m.api.label_area(structure, area)

Switch the label area.
required1 : main structure; 2 : het structure
requiredSee Configuration department - Label Area category.

w3m.api.label_content(structure, content)

Switch the label content.
required1 : main structure; 2 : het structure
requiredSee Configuration department - Label Content category.

w3m.api.fragment_add(chain_id, start, stop)

Add a fragment. This function will return the fragment id of this fragment.
optionalThe chain identifier of this fragment.
optionalThe first residue of this fragment.
optionalThe last residue of this fragment.

w3m.api.fragment_set(fragment_id, rep_mode, color_mode, label_area, label_content, color_defined)

Customize a fragment.
requiredId of the fragment which will be customized.
requiredThe representation mode of this fragment.
requiredThe color mode of this fragment.
requiredThe label area of this fragment.
requiredThe label content of this fragment.
optionalThe used defined color of this fragment.
Taking effect only when color mode is COLOR_BY_USER.

w3m.api.fragment_remove(fragment_id)

Remove a fragment.
requiredId of the fragment which will be removed.

w3m.api.highlight_add(chain_id, start, stop)

HighLight a segment.
requiredThe chain identifier of this segment.
requiredThe first residue of this segment.
requiredThe last residue of this segment.

w3m.api.highlight_remove(chain_id, start, stop)

Remove the HighLight effect of a segment.
requiredThe chain identifier of this segment.
requiredThe first residue of this segment.
requiredThe last residue of this segment.

w3m.api.hide_add(chain_id, start, stop)

Hide a segment.
requiredThe chain identifier of this segment.
requiredThe first residue of this segment.
requiredThe last residue of this segment.

w3m.api.hide_remove(chain_id, start, stop)

Remove the Hide effect of a segment.
requiredThe chain identifier of this segment.
requiredThe first residue of this segment.
requiredThe last residue of this segment.

w3m.api.picked()

Return the serial number of the atom picked from the 3D structure by user just now.

w3m.api.atom(atom_id)

Return the information of an atom.
requiredThe serial number of the atom.
The returned value is a JavaScript array :
[ structure_type, atom_id, atom_name, residue_name, chain_id, residue_id, coordinate, occupancy, b-factor, element ].
1 : Main Structure, 2 : Het Structure.
A JavaScript array : [ x, y, z ].

Faq

See FAQ page. ( https://web3dmol.net/faq.html )

Example

See Example page. ( https://web3dmol.net/example.html )