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, 1356🔥, 0💬
Popular Posts:
Molecule Summary: ID: FYI-1002119 Names: InChIKey: BUGYDGFZZOZRHP-UHFFFAOYS A-NSMILES: CC13CC2CC(C)(...
Molecule Summary: ID: FYI-1000293 SMILES: CCCCC(CC)C(=O)[O-].CCCCC (CC)C(=O)[O-].[Ca+2]Received at F...
Molecule Summary: ID: FYI-1000225 SMILES: CC12CCC3C(C1CC(C2O)O)CCC 4=C3C=CC(=C4)OReceived at FYIcent...
Molecule Summary: ID: FYI-1003904 Names: InChIKey: KWDNDBSQLVBZLH-UHFFFAOYS A-NSMILES: CCc4nc(C(N)=O...
Molecule Summary: ID: FYI-1005814 Names: InChIKey: RMTXRSKFJQIXGO-JIYPWYQOS A-NSMILES: C/C(C)=C\\C=C...