### 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 ```