### Install Dependencies and Build 3Dmol.js
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/learning_environment.md
Installs necessary packages and builds the 3Dmol.js library from source. This is the first step for self-hosting the learning environment.
```bash
#install dependencies
apt install npm python3-pip git
pip3 install flask flask_socketio eventlet
#get latest version from git
git clone https://github.com/3dmol/3Dmol.js.git
#build with npm
cd 3Dmol.js
npm install
```
--------------------------------
### Example 3Dmol.js Viewer URL
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/url.md
This URL demonstrates how to load a PDB structure (1YCR) and apply various styles and selections to different chains and residues.
```html
https://3Dmol.org/viewer.html?pdb=1YCR&select=chain:A&style=cartoon;stick:radius~0.1&surface=opacity:0.8;colorscheme:whiteCarbon&select=chain:B&style=cartoon;line&select=resi:19,23,26;chain:B&style=stick&labelres=backgroundOpacity:0.8;fontSize:14
```
--------------------------------
### Initialize 3Dmol Viewer and Load Data
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/surftest.html
Initializes a 3Dmol viewer and loads PDB data. This is the setup for most visualizations.
```javascript
var glviewer = null;
var labels = [];
var m = null;
var posLobe = null;
var negLobe = null;
var m2 = null;
var atoms = null;
var moldata = "";
var l = null;
var modelgroup = null;
var receptorModel = null;
var ligandModel = null;
var molObj = null;
//Object3D for each rendered model
var lastsurfstyle = true;
var voldata = null;
$(document).ready(function () {
moldata = data = $("#pdb_4udv").val(); //this is 4UDV (has 49 syms)
var viewer = glviewer = $3Dmol.createViewer("gldiv", {
defaultcolors: $3Dmol.rasmolElementColors
});
glviewer.setBackgroundColor(0xffffff);
var model = null; //no symms
var model1 = null; //green
var model2 = null; //blue
model = glviewer.addModel(data, "pdb");
model1 = glviewer.addModel(data, "pdb", { doAssembly: true });
model2 = glviewer.addModel(data, "pdb", { doAssembly: true });
});
```
--------------------------------
### Basic 3Dmol.js Viewer Setup and Styling
Source: https://github.com/3dmol/3dmol.js/blob/master/paper/talk/3dmol.ipynb
Demonstrates creating a 3Dmol.js viewer, downloading a PDB structure, and applying various cartoon and surface styles to different protein chains. Use this for initial visualization and styling of molecular data.
```javascript
$3Dmolpromise.then(function() {
var titleviewer = $3Dmol.createViewer('titlepage');
$3Dmol.download("pdb:1TUP",titleviewer).then(function(model) {
let viewer = titleviewer;
viewer.setViewStyle({style:"outline",color:"black", width:0.1});
viewer.setStyle({}, {cartoon:{ribbon:true}});
viewer.setStyle({chain:'A'}, {cartoon:{arrows:true, color:'spectrum', opacity:0.9}});
viewer.setStyle({chain:'B'}, {cartoon:{style:"trace", color:'red'}});
viewer.setStyle({chain:'C'}, {cartoon:{tubes:true, color:'purple'}});
viewer.addSurface({},{opacity:0.85, color:'red'},{chain:'B'});
viewer.addSurface({}, {opacity:0.8, color:'blue'},{chain:'C'});
viewer.zoomTo();
viewer.rotate(90,'x');
viewer.rotate(-90,'y');
viewer.render();
});
});
$('.reveal .slides>section>section:has(.viewerbackground)').on('touchstart', function(e){
e.preventDefault();
});
$('body').append('
http://3dmol.org/talk
');
$(".jp-InputArea .o:contains(html)").closest('.jp-InputArea').hide();
```
--------------------------------
### Run Standalone Flask Server for 3Dmol.js
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/learning_environment.md
Starts a Flask webserver to host the 3Dmol.js learning environment. The server can optionally be configured to run on a specific port.
```bash
#run a standalone flask server
cd 3Dmol.js/learning-environment
#can optionally specify a port with -p , default is 5000
python3 server.py
```
--------------------------------
### Clone and Build 3Dmol.js from GitHub
Source: https://github.com/3dmol/3dmol.js/blob/master/doc.md
Clone the 3Dmol.js repository from GitHub and install dependencies to build the project.
```bash
git clone https://github.com/3dmol/3Dmol.js
cd 3Dmol.js
npm install
```
--------------------------------
### Initialize py3Dmol View and Basic Styling
Source: https://github.com/3dmol/3dmol.js/blob/master/py3Dmol/saveanim.ipynb
Initializes a py3Dmol viewer with a specified PDB query, sets cartoon style, zooms to fit, and starts spinning the model. Requires the py3Dmol library to be imported.
```python
import py3Dmol
v = py3Dmol.view(query='1ycr',js="http://localhost/3Dmol/build/3Dmol.js")
v.setStyle('cartoon')
v.zoomTo()
v.spin()
```
--------------------------------
### OpenBabel PDB Data Example
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/testsel.html
A sample PDB data string generated by OpenBabel.
```pdb
OpenBabel05131411233D 12 12 0 0 0 0 0 0 0 0999 V2000 0.3122 1.3530 -0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 1.3278 0.4060 -0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 1.0156 -0.9469 -0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -0.3123 -1.3529 -0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.3278 -0.4061 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.0155 0.9469 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 0.5536 2.3986 -0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0 2.3541 0.7199 0.0001 H 0 0 0 0 0 0 0 0 0 0 0 0 1.8004 -1.6788 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0 -0.5536 -2.3986 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0 -2.3541 -0.7198 -0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0 -1.8005 1.6787 0.0000 H 0 0 0 0 0 0 0 0 0 0 0 0 1 7 1 0 0 0 0 1 6 2 0 0 0 0 2 3 2 0 0 0 0 2 1 1 0 0 0 0 2 8 1 0 0 0 0 3 4 1 0 0 0 0 3 9 1 0 0 0 0 4 5 2 0 0 0 0 4 10 1 0 0 0 0 5 6 1 0 0 0 0 6 12 1 0 0 0 0 11 5 1 0 0 0 0 M END
```
--------------------------------
### Install 3Dmol.js via npm or yarn
Source: https://github.com/3dmol/3dmol.js/blob/master/doc.md
Add the 3Dmol.js library to your project's dependencies using npm or yarn.
```bash
npm install 3dmol
# or yarn add 3dmol
```
--------------------------------
### Advanced Embeddable Viewer with Multiple Styles
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/embeddable.md
This example demonstrates how to apply multiple selections and styles to different parts of a molecule using data attributes. It loads a PDB and applies distinct styles to chain A and chain B.
```html
```
--------------------------------
### Initialize Viewer and Render Custom Objects
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/vertexcolors.html
Initializes a 3Dmol viewer and renders custom triangle and cylinder objects with vertex colors. This is the main execution block for the examples.
```javascript
(function () {
var viewer = $3Dmol.createViewer($("#testColorArrays"));
viewer.setBackgroundColor(0xffffffff);
triangle(viewer);
cylinder(viewer);
})();
```
--------------------------------
### Interactive PDB Loading with Button Click
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/code.md
Initializes a 3Dmol viewer and loads PDB data when a button is clicked. This example demonstrates event handling for dynamic content loading.
```javascript
jQuery(function() {
let element = $('#container-02');
let config = { defaultcolors: $3Dmol.rasmolElementColors, backgroundColor: 'white' };
let viewer = $3Dmol.createViewer( element, config );
$('#btn-02').on('click', function() {
let pdbUri = '../tutorials/doc-data/1ycr.pdb';
jQuery.ajax( pdbUri, {
success: function(data) {
let v = viewer;
v.addModel( data, "pdb" ); /* load data */
v.setStyle({}, {cartoon: {color: 'spectrum'}}); /* style all atoms */
v.zoomTo(); /* set camera */
v.render(); /* render scene */
v.zoom(1.2, 1000); /* slight zoom */
},
error: function(hdr, status, err) {
console.error( "Failed to load PDB " + pdbUri + ": " + err );
},
});
})
})
```
--------------------------------
### ES6 Module Example for 3Dmol.js
Source: https://github.com/3dmol/3dmol.js/blob/master/examples/standard.html
This snippet initializes a 3Dmol.js viewer, loads a PDB file from a URI, applies a cartoon style with spectrum coloring, and renders the molecule. It includes basic error handling for the file loading process.
```javascript
.mol-container {
width: 60%;
height: 800px;
position: relative;
}
console.log($3Dmol);
let element = document.querySelector("#container-01");
let config = {};
let viewer = $3Dmol.createViewer(element, config);
let pdbUri = "https://files.rcsb.org/download/1YCR.pdb";
$3Dmol.get(pdbUri).then( function (data) {
console.log("Loaded PDB " + pdbUri);
let v = viewer;
v.addModel(data, "pdb"); /* load data */
v.setStyle( {}, {
cartoon: {
color: "spectrum"
}
}, ); /* style all atoms */
v.zoomTo(); /* set camera */
v.render(); /* render scene */
v.zoom(1.2, 1000); /* slight zoom */
v.setBackgroundColor('white');
console.log("displayed", viewer);
}, function () {
console.error("Failed to load PDB " + pdbUri);
}, );
```
--------------------------------
### OEChem PDB Data Example
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/testsel.html
A sample PDB data string generated by OEChem.
```pdb
v:U4C5Cr:4 -OEChem-12201211493D 9 8 0 1 0 0 0 0 0999 V2000 0.0000 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 1.4142 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 1.0000 1.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 1.4142 0.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 1.0000 -1.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 -1.4142 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 -1.0000 -1.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 -1.4142 0.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 -1.0000 1.0000 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 1 2 1 0 0 0 0 1 3 1 0 0 0 0 1 4 1 0 0 0 0 1 5 1 0 0 0 0 1 6 1 0 0 0 0 1 7 1 0 0 0 0 1 8 1 0 0 0 0 1 9 1 0 0 0 0 M END
```
--------------------------------
### OEChem PDB Data Example (3D)
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/testsel.html
A sample 3D PDB data string generated by OEChem.
```pdb
v:U4C5Cr:4 -OEChem-12201211493D 9 8 0 1 0 0 0 0 0999 V2000 0.0000 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 1.4142 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 1.0000 1.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 0.0000 1.4142 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 -1.0000 1.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 -1.4142 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 -1.0000 -1.0000 S 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 0.0000 -1.4142 S 0 0 0 0 0 0 0 0 0 0 0 0
```
--------------------------------
### Manipulate Symmetry Information
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/surftest.html
Demonstrates how to get and modify symmetry information for a model. This example removes all symmetries and then selectively removes one.
```javascript
var sym = model1.getSymmetries();
var i;
for (i = 0; i < sym.length; i++) {
sym.splice(i, 1);
}
model1.setSymmetries(sym);
var sym2 = model2.getSymmetries();
for (i = 1; i < sym2.length; i++) {
sym2.splice(i, 1);
}
sym2.splice(0, 1); //take out id
model2.setSymmetries(sym2);
```
--------------------------------
### RDKit PDB Data Example
Source: https://github.com/3dmol/3dmol.js/blob/master/tests/webpages/testsel.html
A sample PDB data string generated by RDKit.
```pdb
RDKit 3D 5 4 0 0 0 0 0 0 0 0999 V2000 2.5838 -0.0054 -0.1837 C 0 0 0 0 0 0 0 0 0 0 0 0 1.2815 -0.0027 -0.2004 C 0 0 0 0 0 0 0 0 0 0 0 0 0.0000 0.0000 -0.2168 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.2815 0.0027 -0.2331 C 0 0 0 0 0 0 0 0 0 0 0 0 -2.5838 0.0054 -0.2498 C 0 0 0 0 0 0 0 0 0 0 0 0 1 2 2 0 2 3 3 3 3 4 3 3 4 5 2 0 M END
```
--------------------------------
### Create 3Dmol Viewer on Button Click
Source: https://github.com/3dmol/3dmol.js/blob/master/tutorials/code.md
Initialize a 3Dmol viewer instance when a button is clicked. This example uses jQuery to handle the click event and create the viewer with a green sphere and orange background.
```javascript
jQuery(function() {
let viewer = '';
$('#btn-01').on('click', function() {
let element = $('#container-01');
let config = { backgroundColor: 'orange' };
viewer = $3Dmol.createViewer( element, config );
viewer.addSphere({ center: {x:0, y:0, z:0}, radius: 10.0, color: 'green' });
viewer.zoomTo();
viewer.render();
viewer.zoom(0.8, 2000);
});
$('#btn-01-alt').on('click', function() {
viewer.setBackgroundColor('white');
});
});
```
--------------------------------
### Load and Visualize PDB Data with 3Dmol.js in Jupyter
Source: https://github.com/3dmol/3dmol.js/blob/master/paper/talk/3dmol.ipynb
This example shows how to load a PDB structure ('1ycr') into a 3Dmol.js viewer within a Jupyter notebook environment. It applies line and VDW surface styles to specific chains and renders the molecule. Ensure $3Dmolpromise is loaded before execution.
```python
%%html
```
--------------------------------
### PDB Atom Data Example
Source: https://github.com/3dmol/3dmol.js/blob/master/examples/scaffoldhop2.html
This is a sample of Protein Data Bank (PDB) atom data, detailing atomic coordinates and properties for a protein chain.
```text
ATOM 1 N GLU A 4 -42.495 17.606 -25.179 0.00100.00 A N
ATOM 2 CA GLU A 4 -43.206 16.341 -25.569 0.00 99.35 A C
ATOM 3 C GLU A 4 -42.184 15.268 -25.951 0.00 97.05 A C
ATOM 4 O GLU A 4 -41.495 15.381 -26.973 0.00 98.98 A O
ATOM 5 CB GLU A 4 -44.155 16.598 -26.752 0.00100.00 A C
ATOM 6 CG GLU A 4 -45.520 17.184 -26.376 0.00100.00 A C
ATOM 7 CD GLU A 4 -46.027 16.707 -25.027 0.00100.00 A C
ATOM 8 OE1 GLU A 4 -45.901 15.496 -24.726 0.00100.00 A O
ATOM 9 OE2 GLU A 4 -46.554 17.548 -24.265 0.00100.00 A O1-
ATOM 10 N ARG A 5 -42.101 14.224 -25.135 1.00 91.43 A N
ATOM 11 CA ARG A 5 -41.147 13.147 -25.361 1.00 84.75 A C
ATOM 12 C ARG A 5 -41.582 12.147 -26.430 1.00 77.94 A C
ATOM 13 O ARG A 5 -42.666 12.257 -26.999 1.00 76.50 A O
ATOM 14 CB ARG A 5 -40.900 12.397 -24.046 1.00 86.27 A C
ATOM 15 CG ARG A 5 -41.378 13.105 -22.785 1.00 88.75 A C
ATOM 16 CD ARG A 5 -41.743 12.097 -21.700 1.00 87.59 A C
ATOM 17 NE ARG A 5 -42.655 11.086 -22.224 1.00 86.34 A N
ATOM 18 CZ ARG A 5 -42.864 9.901 -21.666 1.00 86.01 A C
ATOM 19 NH1 ARG A 5 -42.221 9.569 -20.558 1.00 83.06 A N1+
ATOM 20 NH2 ARG A 5 -43.715 9.050 -22.228 1.00 86.60 A N
ATOM 21 N PRO A 6 -40.709 11.176 -26.739 1.00 72.18 A N
ATOM 22 CA PRO A 6 -41.079 10.186 -27.748 1.00 66.19 A C
ATOM 23 C PRO A 6 -41.990 9.157 -27.095 1.00 60.00 A C
ATOM 24 O PRO A 6 -42.295 9.252 -25.905 1.00 55.03 A O
ATOM 25 CB PRO A 6 -39.743 9.574 -28.156 1.00 69.58 A C
ATOM 26 CG PRO A 6 -38.918 9.660 -26.909 1.00 67.33 A C
ATOM 27 CD PRO A 6 -39.350 10.936 -26.217 1.00 72.01 A C
ATOM 28 N THR A 7 -42.410 8.167 -27.874 1.00 54.39 A N
ATOM 29 CA THR A 7 -43.277 7.124 -27.348 1.00 48.31 A C
ATOM 30 C THR A 7 -42.387 5.999 -26.858 1.00 44.94 A C
ATOM 31 O THR A 7 -41.459 5.583 -27.547 1.00 42.72 A O
ATOM 32 CB THR A 7 -44.228 6.591 -28.432 1.00 46.96 A C
ATOM 33 CG2 THR A 7 -44.989 5.369 -27.943 1.00 43.94 A C
ATOM 34 OG1 THR A 7 -45.160 7.617 -28.774 1.00 46.90 A O
ATOM 35 N PHE A 8 -42.666 5.522 -25.654 1.00 40.63 A N
ATOM 36 CA PHE A 8 -41.891 4.441 -25.076 1.00 37.01 A C
ATOM 37 C PHE A 8 -42.706 3.174 -25.182 1.00 37.22 A C
ATOM 38 O PHE A 8 -43.930 3.217 -25.314 1.00 36.90 A O
ATOM 39 CB PHE A 8 -41.616 4.693 -23.593 1.00 34.61 A C
ATOM 40 CG PHE A 8 -40.604 5.764 -23.325 1.00 31.91 A C
ATOM 41 CD1 PHE A 8 -40.836 7.076 -23.713 1.00 29.46 A C
ATOM 42 CD2 PHE A 8 -39.427 5.463 -22.648 1.00 29.97 A C
ATOM 43 CE1 PHE A 8 -39.914 8.077 -23.425 1.00 27.50 A C
ATOM 44 CE2 PHE A 8 -38.497 6.452 -22.355 1.00 26.21 A C
ATOM 45 CZ PHE A 8 -38.740 7.760 -22.740 1.00 28.17 A C
ATOM 46 N TYR A 9 -42.023 2.043 -25.121 1.00 38.08 A N
ATOM 47 CA TYR A 9 -42.706 0.776 -25.151 1.00 39.20 A C
ATOM 48 C TYR A 9 -42.026 -0.115 -24.133 1.00 43.54 A C
ATOM 49 O TYR A 9 -40.797 -0.233 -24.105 1.00 41.28 A O
ATOM 50 CB TYR A 9 -42.708 0.157 -26.564 1.00 35.68 A C
ATOM 51 CG TYR A 9 -41.409 -0.446 -27.068 1.00 33.23 A C
ATOM 52 CD1 TYR A 9 -41.170 -1.811 -26.968 1.00 28.10 A C
ATOM 53 CD2 TYR A 9 -40.444 0.345 -27.704 1.00 28.94 A C
ATOM 54 CE1 TYR A 9 -40.006 -2.382 -27.492 1.00 30.75 A C
ATOM 55 CE2 TYR A 9 -39.281 -0.216 -28.230 1.00 29.79 A C
ATOM 56 CZ TYR A 9 -39.067 -1.580 -28.121 1.00 29.80 A C
ATOM 57 OH TYR A 9 -37.913 -2.146 -28.630 1.00 31.78 A O
ATOM 58 N ARG A 10 -42.855 -0.690 -23.264 1.00 49.78 A N
ATOM 59 CA ARG A 10 -42.416 -1.580 -22.198 1.00 51.96 A C
ATOM 60 C ARG A 10 -42.079 -2.931 -22.782 1.00 51.10 A C
ATOM 61 O ARG A 10 -42.470 -3.241 -23.899 1.00 53.59 A O
ATOM 62 CB ARG A 10 -43.525 -1.736 -21.166 1.00 56.26 A C
ATOM 63 CG ARG A 10 -43.087 -1.450 -19.764 1.00 62.99 A C
ATOM 64 CD ARG A 10 -44.271 -1.369 -18.828 1.00 71.16 A C
ATOM 65 NE ARG A 10 -43.857 -0.807 -17.547 1.00 82.30 A N
ATOM 66 CZ ARG A 10 -43.797 -1.492 -16.407 1.00 84.78 A C
ATOM 67 NH1 ARG A 10 -44.131 -2.779 -16.384 1.00 83.98 A N1+
ATOM 68 NH2 ARG A 10 -43.384 -0.891 -15.295 1.00 82.21 A N
ATOM 69 N GLN A 11 -41.356 -3.739 -22.024 1.00 53.85 A N
ATOM 70 CA GLN A 11 -40.966 -5.060 -22.492 1.00 57.92 A C
ATOM 71 C GLN A 11 -40.065 -5.689 -21.437 1.00 62.09 A C
ATOM 72 O GLN A 11 -39.153 -5.045 -20.933 1.00 62.69 A O
ATOM 73 CB GLN A 11 -40.254 -4.941 -23.854 1.00 54.94 A C
ATOM 74 CG GLN A 11 -38.911 -5.638 -23.970 1.00 57.62 A C
ATOM 75 CD GLN A 11 -38.363 -5.622 -25.387 1.00 58.56 A C
ATOM 76 NE2 GLN A 11 -38.295 -4.439 -25.981 1.00 56.76 A N
ATOM 77 OE1 GLN A 11 -38.001 -6.661 -25.938 1.00
```