Display 3-D Molecule Structure with 3Dmol.js
Q
How to display a 3-D molecule structure with 3Dmol.js?
✍: FYIcenter.com
A
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, 2283🔥, 0💬
Related Topics:
