3dmol
Version:
Object oriented Javascript molecular visualization library
257 lines (232 loc) • 10.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>3Dmol.js - A modern, object-oriented JavaScript library for visualizing molecular data</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
<script src="build/3Dmol-min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55629183-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var $3Dmol = $3Dmol || {};
var $ = jQuery || {};
var initSDF = function(viewer) {
var s1 = viewer.addSphere({radius: 1.25, center: {x:-6.89, y:0.75, z:0.35}});
s1.wireframe = true; s1.color = $3Dmol.CC.color("purple");
viewer.addLabel("Aromatic", {position: {x:-6.89, y:0.75, z:0.35}, backgroundColor: 0x800080, backgroundOpacity: 0.8});
var s2 = viewer.addSphere({radius: 1.25, center: {x:1.32, y:2.91, z:-1.49}});
s2.wireframe = true; s2.color = $3Dmol.CC.color("purple");
viewer.addLabel("Aromatic", {position: {x:1.32, y:2.91, z:-1.49}, backgroundColor: 0x800080, backgroundOpacity: 0.8});
var s3 = viewer.addSphere({radius: 0.5, center: {x:-0.42, y:-0.48, z:0.64}});
s3.wireframe = true; s3.color = $3Dmol.CC.color(0xbbbbbb);
var a = viewer.addArrow({start: {x:-0.4217, y:-0.4795, z:0.6395}, end: {x:-0.613, y:-0.891, z:-0.198},
radius: 0.1});
viewer.addLabel("Hydrogen Donor", {position: {x:-0.4217, y:-0.4795, z:0.6395}, backgroundColor: 0x808080, backgroundOpacity:0.8});
a.color = $3Dmol.CC.color(0xeeeeee);
viewer.render();
};
var initShapes = function(viewer) {
$.get('tests/test_structs/benzene-homo.cube', function(data){
var voldata = new $3Dmol.VolumeData(data, "cube");
viewer.addIsosurface(voldata, {isoval: 0.01, color: "blue", alpha: 0.95, smoothness: 10});
viewer.addIsosurface(voldata, {isoval: -0.01, color: "red", alpha: 0.95, smoothness: 10});
viewer.setStyle({}, {stick:{}});
viewer.zoomTo();
//viewer.zoom(.75);
viewer.render();
}, 'text');
};
var init1YCR = function(viewer) {
viewer.addStyle({}, {"line":{}});
viewer.addSurface($3Dmol.SurfaceType.VDW, {'opacity':0.8, colorscheme: 'whiteCarbon'}, {"chain":"A"},{"chain":"A"});
viewer.addStyle({"chain":"B"}, {"stick":{colorscheme:'Jmol'}});
viewer.zoomTo({"chain":"B"});
};
var addSurf = function(viewer) {
viewer.addSurface($3Dmol.SurfaceType.VDW, {opacity:0.75},
{hetflag: false}, {hetflag:false}, {chain: 'B'});
};
$( document ).ready(function() {
var hidetext = function () {
$("#text3Dmol").hide();
$("#viewtext").hide();
$("#embedtext").hide();
$("#jupytertext").hide();
$("#developtext").hide();
};
$('#view').hover(
function () {
hidetext();
$("#viewtext").show();
},
function () {
hidetext();
$("#text3Dmol").show();
});
$('#embed').hover(
function () {
hidetext();
$("#embedtext").show();
},
function () {
hidetext();
$("#text3Dmol").show();
});
$('#jupyter').hover(
function () {
hidetext();
$("#jupytertext").show();
},
function () {
hidetext();
$("#text3Dmol").show();
});
$('#develop').hover(
function () {
hidetext();
$("#developtext").show();
},
function () {
hidetext();
$("#text3Dmol").show();
});
});
</script>
</head>
<body>
<div id=content>
<div class="header">
<div id="title3Dmol"><b>3D</b>mol<font style="font-weight:400">.js</font></div>
<div id="title3Dmolright" >
<div id="strip" class = "titlefont">
<a href="doc/tutorial-url.html" id="view" class="titletext">View</a>
<a href="doc/tutorial-embeddable.html" id="embed" class="titletext">Embed</a>
<a href="http://nbviewer.jupyter.org/github/3dmol/3Dmol.js/blob/9050b97144e81f065df7eecc87ba9a16723ab14b/py3Dmol/examples.ipynb" id="jupyter" class="titletext">Jupyter  </a>
<a href="doc/index.html" id="develop" class="titletext">Develop</a>
</div>
<div id="infotext">
<span id="text3Dmol" class="floattext">A modern, object-oriented JavaScript library for visualizing molecular data</span>
<span id="viewtext" class="floattext">View structures through a declarative URL interface</span>
<span id="embedtext" class="floattext">Embed molecular viewers in webpages with two lines of code</span>
<span id="jupytertext" class="floattext">Include interactive 3D structures in Jupyter notebooks</span>
<span id="developtext" class="floattext">Develop web applications using a full featured API</span>
</div>
</div>
<div id="rightstrip" class="titlefont">
<a id="issues" href="https://github.com/3dmol/3Dmol.js/issues" class="titletext">Feedback</a>
<a id="help" href="https://github.com/3dmol/3Dmol.js" class="titletext">Download</a>
</div>
</div>
</div>
<div id="viewercontainer" class = "body row">
<div class="table">
<div class="tablerow">
<div id='viewer1' class='viewer_3Dmoljs' data-href='tests/test_structs/2por.pdb' data-backgroundcolor='0xffffff' data-select='{"hetflag":false}' data-style='{"cartoon":{"color":"spectrum"}}'></div>
<div id='viewer2' class='viewer_3Dmoljs' data-element='moldata_sdf' data-datatype='sdf' data-style='{"stick":{}}' data-callback='initSDF' data-backgroundcolor='0xf6f6f6'></div>
</div>
<div class="tablerow">
<div id='viewer4' class='viewer_3Dmoljs' data-href="tests/test_structs/benzene.sdf" data-datatype="sdf" data-callback='initShapes' data-backgroundcolor='0xf6f6f6'></div>
<div id='viewer3' class='viewer_3Dmoljs' data-href='tests/test_structs/1YCR.pdb' data-backgroundcolor='0xffffff' data-style='{"cartoon":{}}' data-callback='init1YCR'></div>
</div>
</div>
<textarea style="display: none;" id="moldata_sdf">v:U4C5Cr:4
-OEChem-12201211493D
43 44 0 1 0 0 0 0 0999 V2000
-8.1967 0.5191 0.7989 C 0 0 0 0 0 0 0 0 0 0 0 0
-7.6843 -0.2222 -0.2656 C 0 0 0 0 0 0 0 0 0 0 0 0
-7.4111 1.4960 1.4107 C 0 0 0 0 0 0 0 0 0 0 0 0
-6.3864 0.0132 -0.7188 C 0 0 0 0 0 0 0 0 0 0 0 0
1.7096 1.6571 -1.9242 C 0 0 0 0 0 0 0 0 0 0 0 0
1.0806 3.1754 -0.1629 C 0 0 0 0 0 0 0 0 0 0 0 0
1.5556 2.6951 -2.8322 C 0 0 0 0 0 0 0 0 0 0 0 0
0.9424 4.1749 -1.1154 C 0 0 0 0 0 0 0 0 0 0 0 0
-6.1130 1.7316 0.9575 C 0 0 0 0 0 0 0 0 0 0 0 0
-5.6006 0.9902 -0.1071 C 0 0 0 0 0 0 0 0 0 0 0 0
1.4684 1.9044 -0.5763 C 0 0 0 0 0 0 0 0 0 0 0 0
0.3375 0.5391 1.2056 C 0 0 0 0 0 0 0 0 0 0 0 0
-2.7567 -0.6431 0.1759 C 0 0 0 0 0 0 0 0 0 0 0 0
4.1896 -0.7188 0.9465 C 0 0 0 0 0 0 0 0 0 0 0 0
-5.2909 2.7837 1.6268 C 0 0 0 0 0 0 0 0 0 0 0 0
-1.7605 -3.4645 -4.5901 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.7254 -2.1586 3.8348 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.5133 -4.3920 2.7268 C 0 0 0 0 0 0 0 0 0 0 0 0
6.6863 1.6002 -0.3205 C 0 0 0 0 0 0 0 0 0 0 0 0
7.5989 1.9082 1.9888 C 0 0 0 0 0 0 0 0 0 0 0 0
-4.2066 1.2256 -0.6124 C 0 0 0 0 0 0 0 0 0 0 0 0
-0.9764 -3.9346 -3.3752 C 0 0 0 0 0 0 0 0 0 0 0 0
0.3654 -3.2099 -3.2596 C 0 0 0 0 0 0 0 0 0 0 0 0
1.1347 -3.6640 -2.0173 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4837 -2.9599 -1.8449 C 0 0 0 0 0 0 0 0 0 0 0 0
3.2863 -3.4666 -0.6437 C 0 0 0 0 0 0 0 0 0 0 0 0
-1.6329 -2.4479 1.5093 C 0 0 0 0 0 0 0 0 0 0 0 0
5.1024 1.5172 1.6288 C 0 0 0 0 0 0 0 0 0 0 0 0
4.6041 -2.7047 -0.5026 C 0 0 0 0 0 0 0 0 0 0 0 0
1.6282 0.7946 0.4366 C 0 0 1 0 0 0 0 0 0 0 0 0
-1.6645 -0.9464 1.1968 C 0 0 2 0 0 0 0 0 0 0 0 0
3.9912 0.7912 0.8596 C 0 0 1 0 0 0 0 0 0 0 0 0
-0.5310 -2.8799 2.4982 C 0 0 0 0 0 0 0 0 0 0 0 0
6.5338 1.2007 1.1499 C 0 0 0 0 0 0 0 0 0 0 0 0
1.1810 3.9094 -2.4070 N 0 3 0 0 0 0 0 0 0 0 0 0
-3.2093 0.6656 0.2711 N 0 0 0 0 0 0 0 0 0 0 0 0
4.3505 -1.2956 -0.3057 N 0 0 0 0 0 0 0 0 0 0 0 0
-0.4217 -0.4795 0.6395 N 0 0 0 0 0 0 0 0 0 0 0 0
2.6640 1.0826 1.3983 N 0 0 0 0 0 0 0 0 0 0 0 0
1.0467 4.8534 -3.2690 O 0 5 0 0 0 0 0 0 0 0 0 0
0.0407 1.1492 2.2310 O 0 0 0 0 0 0 0 0 0 0 0 0
-3.1430 -1.4631 -0.6544 O 0 0 0 0 0 0 0 0 0 0 0 0
4.2427 -1.3265 2.0137 O 0 0 0 0 0 0 0 0 0 0 0 0
1 2 1 0 0 0 0
6 8 1 0 0 0 0
3 9 1 0 0 0 0
9 15 1 0 0 0 0
4 10 1 0 0 0 0
10 21 1 0 0 0 0
5 11 1 0 0 0 0
11 30 1 0 0 0 0
12 30 1 0 0 0 0
12 38 1 0 0 0 0
13 31 1 0 0 0 0
13 36 1 0 0 0 0
14 32 1 0 0 0 0
14 37 1 0 0 0 0
21 36 1 0 0 0 0
16 22 1 0 0 0 0
22 23 1 0 0 0 0
23 24 1 0 0 0 0
24 25 1 0 0 0 0
25 26 1 0 0 0 0
26 29 1 0 0 0 0
29 37 1 0 0 0 0
30 39 1 0 0 0 0
27 31 1 0 0 0 0
31 38 1 0 0 0 0
28 32 1 0 0 0 0
32 39 1 0 0 0 0
17 33 1 0 0 0 0
18 33 1 0 0 0 0
27 33 1 0 0 0 0
19 34 1 0 0 0 0
20 34 1 0 0 0 0
28 34 1 0 0 0 0
7 35 1 0 0 0 0
35 40 1 0 0 0 0
1 3 2 0 0 0 0
2 4 2 0 0 0 0
5 7 2 0 0 0 0
9 10 2 0 0 0 0
6 11 2 0 0 0 0
12 41 2 0 0 0 0
13 42 2 0 0 0 0
14 43 2 0 0 0 0
8 35 2 0 0 0 0
M CHG 2 35 1 40 -1
M END
</textarea>
</body>
</html>