Collections:
addModel() - Add Model from Data
How to create a model from a molecule data string with 3Dmol.js addModel() methods?
✍: FYIcenter.com
viewer.addModel() method in the $3Dmol.GLViewer class
allows you to create a model from molecule data string:
{$3Dmol.GLViewer} addModel(data, format, options) -> {$3Dmol.GLModel}
Here is an HTML code example, View-PDB-Online.html, that create a model from molecule data obtained an AJAX call.
<html><head> <script src="/3Dmol-min.js"></script> <style> .mol-container {width: 400px; height: 400px; position: relative;} </style> </head> <body> <div id="container-01" class="mol-container"></div> <script> $(function() { let element = $('#container-01'); let config = { backgroundColor: 'grey' }; let viewer = $3Dmol.createViewer( element, config ); let pdbUri = 'https://files.rcsb.org/download/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 */ }, error: function(hdr, status, err) { console.error( "Failed to load PDB " + pdbUri + ": " + err ); }, }); }); </script> </body></html>
This example HTML code will display a protein structure as shown below:
⇐ addSphere() - Create Spheres
⇑⇑ 3Dmol.js FAQ
2022-12-26, 189👍, 0💬
Popular Posts:
Molecule Summary: ID: FYI-1000236 SMILES: NCc5ccc4OC3(CCN(C(=O)c2c c(C#Cc1ccccc1)co2)CC3)Cc 4c5Receiv...
Molecule Summary: ID: FYI-1000046 SMILES: Received at FYIcenter.com on: 2020-05-15
Where to find FAQ (Frequently Asked Questions) in understanding what is SDF/Mol V3000 file format? H...
Molecule Summary: ID: FYI-1000977 SMILES: S=C1S/C(=C/c2ccc(cc2)C(C )C)C(=O)N1CCN(C)CReceived at FYIc...
Molecule Summary: ID: FYI-1000381 SMILES: Cl/C/1=C/C=C\\N=Cl1 Received at FYIcenter.com on: 2021-04-...