/
splitviewer.html
50 lines (41 loc) · 1.65 KB
/
splitviewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="../build/3Dmol.js"></script>
</head>
<body style="height: 100%">
<div id="test38" style="width: 800px; height: 1200px; margin: 50px; position: relative"></div>
<script>
function callback(viewer){
return function(){
viewer.setStyle({}, {cartoon:{color:"spectrum"}});
console.log(viewer)
viewer.render();
}
}
var viewers = $3Dmol.createViewerGrid($("#test38"),{rows:2,cols:3,control_all:false},{})
console.log(viewers)
for(var r = 0; r< viewers.length ; r++){
for(var c = 0; c< viewers[0].length; c++){
var viewer = viewers[r][c];
$3Dmol.download("pdb:1YCR",viewer,{},callback(viewer));
}
}
$3Dmol.download("pdb:1YCR",viewers[0][2],{},function(){
viewers[0][2].setStyle({},{line:{}});
viewers[0][2].spin(true,{x:0,y:1,z:1});
viewers[0][2].setBackgroundColor("000000");
viewers[0][2].render();
});
/*
var viewer = $3Dmol.createViewer($("#test38"),{});
$3Dmol.download("pdb:1MO8",viewer,{},function(){
viewer.setStyle({}, {cartoon:{color:"spectrum"}});
viewer.render();
});
*/
</script>
</body>
</html>