Collections:
Display 3-D Molecule Structure with 3Dmol.js
How to display a 3-D molecule structure with 3Dmol.js?
✍: FYIcenter.com
If you have a 3-D molecule structure stored in SDF format,
you can follow these steps to load and display it with the 3Dmol.js library.
1. Create an HTML file, Display-Molecule.html, with the following code. The molecule's SDF data is hidden in a <textarea> tag.
<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> <textarea id="molecule" style="visibility:false"> 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 $$$$ </textarea> <script> $(function() { let element = $('#container-01'); let config = { backgroundColor: 'grey' }; let viewer = $3Dmol.createViewer( element, config ); var rec1 = viewer.addModel($('#molecule').val(), "sdf"); rec1.setStyle({stick:{color:'lightgray', opacity:'1.0'}, sphere:{color:'gray', radius: 0.4}}); viewer.addLabel("Aromatic", {position: {x:2.6, y:0.75, z:0.35}, backgroundColor: 0x800080, backgroundOpacity: 0.8}); viewer.zoomTo(); viewer.render(); }); </script> </body></html>
2. View the HTML document through your Web server: http://localhost/Display-Molecule.html. You see the 3-D molecule structure displayed. You can room in and rotate it with your mouse.
⇒ Display Protein Structure with 3Dmol.js
⇐ Install 3Dmol.js Library Locally
⇑ Getting Started with 3Dmol.js
⇑⇑ 3Dmol.js FAQ
2022-12-24, 246👍, 0💬
Popular Posts:
Molecule Summary: ID: FYI-1000208 SMILES: Cc3ccc(NC(=O)c2ccc(CN1CC N(C)CC1)cc2)cc3Nc5nccc(c 4cccnc4)n5...
Where to find FAQ (Frequently Asked Questions) on Open Babel, Chemistry Toolbox? I want to learn mor...
Molecule Summary: ID: FYI-1000456 SMILES: CCN(CCCC(C)NC1=C2C=CC(=C C2=NC=C1)Cl)CCOReceived at FYIcen...
Molecule Summary: ID: FYI-1001812 SMILES: CC(C)CCCCCCOC(=O)C1=CC=C C=C1C(=O)OCCCCCCC(C)CReceived at ...
What are SDF (Structural Data File), or Mol, V2000 format specifications? Here is a summary of SDF/M...