mirror of
https://github.com/3dmol/3Dmol.js.git
synced 2026-06-04 08:39:49 +09:00
7030ef27c3
This is in response to Issue #832. The previous FXAA algorithm didn't work particularly well unless applied to upsampled outputs. This implements a slighltly more complex algorithm (same as molstar) that looks better without upscaling. Add an upscale viewer config option so user can configure level of refinement.
270 lines
12 KiB
HTML
270 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>3Dmol.js - A modern, object-oriented JavaScript library for visualizing molecular data</title>
|
|
<meta name="Author" content="David Koes">
|
|
<meta property="og:title" content="3Dmol.js - A modern, object-oriented JavaScript library for visualizing molecular data">
|
|
<meta property="og:description" content="3Dmol.js is an object-oriented, WebGL based JavaScript library for online molecular visualization - No Java required!">
|
|
<meta property="og:image" content="https://avatars.githubusercontent.com/u/15018659?s=200&v=4">
|
|
<meta property="og:url" content="https://3dmol.org">
|
|
|
|
<link rel="icon" type="image/png" href="favicon.ico">
|
|
<link rel="apple-touch-icon" href="favicon.ico">
|
|
<link type="text/css" rel="stylesheet" href="css/index.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
|
|
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></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 src="./build/3Dmol.js"></script>
|
|
<script>
|
|
const initShapes = function (viewer) {
|
|
$.get('tests/test_structs/benzene-homo.cube', function (data) {
|
|
var voldata = new $3Dmol.VolumeData(data, "cube");
|
|
if (viewer.hasVolumetricRender()) {
|
|
viewer.addVolumetricRender(voldata, {
|
|
transferfn: [{ color: "blue", opacity: .075, value: 0.1 },
|
|
{ color: "blue", opacity: .001, value: 0.01 },
|
|
{ color: "white", opacity: 0, value: 0 },
|
|
{ color: "red", opacity: .001, value: -0.01 },
|
|
{ color: "red", opacity: .075, value: -0.1 }]
|
|
});
|
|
} else {
|
|
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.render();
|
|
}, 'text');
|
|
};
|
|
|
|
const 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" });
|
|
viewer.addResLabels({chain: "B", resi: [19,23,26]},{backgroundColor: 0xb0b0b0, backgroundOpacity: 0.8, inFront: true});
|
|
viewer.addCylinder({start: {chain: "B", resi: 23, atom: "NE1"}, end: {chain: "A", resi: 54, atom: "O"}, dashed: true,color:'#FFFAA0',fromCap:'round',toCap:'round'});
|
|
};
|
|
|
|
// bind callbacks to window object so they can be resolved in autoload
|
|
window.initShapes = initShapes;
|
|
window.init1YCR = init1YCR;
|
|
|
|
const addSurf = function (viewer) {
|
|
viewer.addSurface($3Dmol.SurfaceType.VDW, { opacity: 0.75 },
|
|
{ hetflag: false }, { hetflag: false }, { chain: 'B' });
|
|
};
|
|
|
|
$(document).ready(function () {
|
|
const hidetext = function () {
|
|
$("#text3Dmol, #viewtext, #embedtext, #teachtext, #jupytertext, #developtext").hide();
|
|
};
|
|
$('#view').hover(
|
|
function () {
|
|
hidetext();
|
|
$("#viewtext").show();
|
|
},
|
|
function () {
|
|
hidetext();
|
|
$("#text3Dmol").show();
|
|
});
|
|
$('#embed').hover(
|
|
function () {
|
|
hidetext();
|
|
$("#embedtext").show();
|
|
},
|
|
function () {
|
|
hidetext();
|
|
$("#text3Dmol").show();
|
|
});
|
|
|
|
$('#teach').hover(
|
|
function () {
|
|
hidetext();
|
|
$("#teachtext").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="doc/tutorial-learning_environment.html" id="teach" class="titletext">Teach</a>
|
|
<a href="https://colab.research.google.com/drive/1T2zR59TXyWRcNxRgOAiqVPJWhep83NV_?usp=sharing" 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="teachtext" class="floattext">Engage students while teaching molecular structures</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-href='tests/test_structs/3m8l.cif.gz' data-config='ambientOcclusion:strength~1,radius=10'
|
|
data-select1='chain:A' data-style1='stick:radius=1,color=yellow'
|
|
data-select2='chain:B' data-style2='sphere:color=white'
|
|
data-select3='chain:C' data-surface3='color:#5085e4;opacity:1' 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>
|