Commit bc41d29b authored by Jacob Durrant's avatar Jacob Durrant

3dmoljs example

parent d41357dc
<html>
<head>
<title>Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol.js"></script>
</head>
<body>
<div id="gldiv" style="width: 450px; height: 450px;"></div>
<script>
// Create the viewer
glviewer = $3Dmol.createViewer("gldiv", {
defaultcolors: $3Dmol.rasmolElementColors,
});
glviewer.setBackgroundColor(0xffffff);
// Some PDB data (could be the whole PDB)
var examplePDBData = `ATOM 1 N GLU A 25 10.801 -12.147 -5.180 1.00 49.08 N
ATOM 2 CA GLU A 25 11.124 -13.382 -4.414 1.00 50.43 C
ATOM 3 C GLU A 25 11.769 -12.878 -3.130 1.00 49.75 C
ATOM 4 O GLU A 25 11.175 -12.047 -2.441 1.00 49.34 O
ATOM 5 CB GLU A 25 12.075 -14.259 -5.228 1.00 53.69 C
ATOM 6 CG GLU A 25 11.564 -14.543 -6.638 1.00 57.47 C
ATOM 7 CD GLU A 25 12.414 -15.556 -7.397 1.00 61.03 C
ATOM 8 OE1 GLU A 25 12.439 -16.745 -6.995 1.00 61.91 O
ATOM 9 OE2 GLU A 25 13.043 -15.163 -8.409 1.00 62.06 O
ATOM 10 N THR A 25Z 12.965 -13.355 -2.800 1.00 49.81 N
ATOM 11 CA THR A 25Z 13.656 -12.864 -1.611 1.00 48.43 C
ATOM 12 C THR A 25Z 14.518 -11.718 -2.102 1.00 44.63 C
ATOM 13 O THR A 25Z 15.519 -11.956 -2.778 1.00 45.84 O
ATOM 14 CB THR A 25Z 14.598 -13.915 -1.009 1.00 49.13 C
ATOM 15 OG1 THR A 25Z 15.478 -14.396 -2.032 1.00 49.45 O
ATOM 16 CG2 THR A 25Z 13.804 -15.068 -0.397 1.00 49.70 C
ATOM 17 N LEU A 27 14.081 -10.486 -1.869 1.00 38.63 N
ATOM 18 CA LEU A 27 14.863 -9.337 -2.294 1.00 35.16 C
ATOM 19 C LEU A 27 15.877 -8.978 -1.213 1.00 32.59 C
ATOM 20 O LEU A 27 15.495 -8.696 -0.082 1.00 30.66 O
ATOM 21 CB LEU A 27 13.960 -8.146 -2.616 1.00 32.87 C
ATOM 22 CG LEU A 27 13.336 -8.100 -4.010 1.00 29.89 C
ATOM 23 CD1 LEU A 27 13.942 -6.978 -4.794 1.00 29.32 C
ATOM 24 CD2 LEU A 27 13.546 -9.397 -4.744 1.00 27.86 C `;
// Load the datta into the viewer.
var v = glviewer.addModel(examplePDBData, "pdb");
// Select a few atoms and change their style.
// console.log(atoms);
glviewer.setStyle({ atom: "CA" }, { sphere: {} });
glviewer.setStyle({ atom: ["C", "O"] }, { stick: {} });
glviewer.zoomTo();
glviewer.render();
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment