Category: science

A short post describing how to get 3Dmol.js doing something practical in WordPress, hopefully sparing someone else some mild confusion and error messages. In retrospect, the setup is trivial and works beautifully – it's an excellent tool for bringing small molecules, proteins, nanostructures, and others to life with a loading time on-par with how long it takes pages on this site to load generally.

Custom HTML

All of the 3Dmol.js content goes into Custom HTML blocks. You can have as many of the "div" as you like in the same block or have them all separate. Place the script (below) above them all.

script

Into your first Custom HTML block, place the following:

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>

div (and comments)

I'm using 2NA5, my co-authored contribution to the RCSB Protein Data Bank (or at proteopedia), as the example for some of the peptide visualization capabilities. The breakdown by section that renders the structure you see is as follows:

<div style=
"height: 550px; 
width: 550px; 
margin: 20px 0px 20px 0px;
position: relative;" 

Defining viewer size and placement, with the specific 550px width here for the WordPress Twenty Seventeen theme I'm still using on this site (else go the full 1000px if you're doing a single-column page with the same theme). The "margin" here is to provide some space between the rendering window and any text above or below it.

class="viewer_3Dmoljs"

Direct from the Bioinformatics article: "HTML authors do not need to use JavaScript to embed 3D viewers within their websites. 3Dmol.js will automatically turn any HTML element annotated with the viewer_3Dmoljs class into a viewer."

data-pdb="2NA5"
data-href="/structures/2NA5.pdb"

If you're loading directly from the PDB, use data-pdb. If storing locally (or somewhere with a specific location), data-href and the directory structure off the main site is all you need. I've gone ahead and made a www.somewhereville.com/structures folder in my WordPress instance to keep .pdb and .mol2 files localized (hence the data-href above), else you can call directly from the link you're provided when you upload them to your site.

data-backgroundcolor="0xeeeeee" 

An almost-white background (instead of pure 0xffffff) to easily see the placement of the viewer for this example (and back to white backgrounds for the other structures below).

data-style1="stick:radius=0.1"
data-style2="sphere:radius=0.3"
data-style3="cartoon:color=spectrum"

The business-end of the rendering. This structure has three different data-style representations, for which you need to have a -style1 (here, thinned sticks), -style2 (here, scaled vdW spheres), -style3 (here, peptide backbone cartoon) to call them and to make your custom tweaks to the rendering (after the colons). If you're only going to use one data-style, you can skip the numbering. The "spectrum" style here for the cartoon applies a rainbow gradient to the backbone.

data-surface='opacity:.7;color:spectrum'

The surface styles work like the data styles. Note the colons and semicolons in changing the rendering. Here, the "spectrum" call for the data-surface provides the by-atom coloration on the surface as shown.

data-ui="true">
</div>

Show the controls so the user can play with the structure, close up the div, and that's it. The final block as one piece (for ease of copying + pasting) looks like the following:

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<div style="height: 550px; width: 550px; margin: 20px 0px 20px 0px" class="viewer_3Dmoljs" data-pdb="2NA5" data-backgroundcolor="0xeeeeee" data-style1="stick:radius=0.1" data-style2="sphere:radius=0.3" data-style3="cartoon:color=spectrum" data-surface='opacity:.7;color:spectrum' data-ui="true"></div>

And the over-stylized results for 2NA5 is shown below:

Controls

To anyone wanting to drive the structure above or items below, these are the operations from the 3Dmol tutorial page (3dmol.org/doc/tutorial-url.html).

Movement	Mouse Input	Touch Input
Rotation	Primary Mouse Button	Single touch
Translation	Middle Mouse Button or Ctrl+Primary	Triple touch
Zoom	Scroll Wheel or Second Mouse Button or Shift+Primary	Pinch (double touch)
Slab	Ctrl+Second	Not Available

pdb and mol2

You will note that no hydrogen atoms are shown for the PDB 2NA5 file above (or any other .pdb file), nor are the H atoms shown for the crimp junction structure from the nano gallery shown below:

While one can play games in the .pdb file to show atoms where the H atoms are in the structure, a simple alternative is to convert the .pdb into a .mol2 with something like openbabel (how I did the conversion as shown below), after which all atoms are now represented:

… and also with a data-surface call added for show (which is to say, the surface is generated for the structure, not from anything PDB-specific).

And, to close up this first quick guide, a reproduction of the TX junction from the nano gallery is provided, with the div block to produce the six distinct chain colors and renderings as shown below:

<div style="height: 550px; width: 550px;  margin: 20px 0px 20px 0px; position: relative;" class="viewer_3Dmoljs" data-href="/structures/TX_DNA.pdb" data-backgroundcolor="0xffffff" 
data-select1='chain:A' 
data-surface1='opacity:.9;color:red' 
data-style1='stick:color=red'
data-select2='chain:B' 
data-surface2='opacity:.9;color:deepskyblue' 
data-style2='stick:color=deepskyblue'
data-select3='chain:C' 
data-surface3='opacity:.3;color:brown' 
data-style3='stick:color=brown'
data-select4='chain:D' 
data-surface4='opacity:.3;color:orange' 
data-style4='stick:color=orange'
data-select5='chain:E' 
data-surface5='opacity:.3;color:green' 
data-style5='stick:color=green'
data-select6='chain:F' 
data-surface6='opacity:.3;color:purple' 
data-style6='stick:color=purple'
data-ui="true"></div>

And give it a few seconds to throw the surfaces up.

Relevant links:

• https://3dmol.csb.pitt.edu/doc/index.html
• http://3dmol.csb.pitt.edu/doc/tutorial-code.html
• https://academic.oup.com/bioinformatics/article/31/8/1322/213186?login=false