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.

3Dmol.js Example - Display Molecule
3Dmol.js Example - Display Molecule

 

Display Protein Structure with 3Dmol.js

Install 3Dmol.js Library Locally

Getting Started with 3Dmol.js

⇑⇑ 3Dmol.js FAQ

2022-12-24, 374🔥, 0💬