-
Notifications
You must be signed in to change notification settings - Fork 191
/
click.html
62 lines (56 loc) · 1.49 KB
/
click.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
51
52
53
54
55
56
57
58
59
60
61
62
<script src="../../build/3Dmol.js"></script>
<style>
.mol-container {
width: 100%;
height: 800px;
position: relative;
}
</style>
<div id="container-01" class="mol-container"></div>
<script>
let element = $('#container-01');
let config = { backgroundColor: 'white' };
let viewer = $3Dmol.createViewer(element, config);
let lines = [
[[0, 0, 0], [10, 0, 0,]],
[[10, 0, 0], [10, 10, 0,]],
[[10, 10, 0], [0, 10, 0,]],
[[0, 10, 0], [0, 0, 0,]],
[[0, 0, 10], [10, 0, 10,]],
[[10, 0, 10], [10, 10, 10,]],
[[10, 10, 10], [0, 10, 10,]],
[[0, 10, 10], [0, 0, 10,]],
[[0, 0, 0], [0, 0, 10,]],
[[10, 0, 0], [10, 0, 10,]],
[[10, 10, 0], [10, 10, 10,]],
[[0, 10, 0], [0, 10, 10,]],
]
for (let i = 0; i < 12; i++) {
a = viewer.addLine({
start: {
x: lines[i][0][0],
y: lines[i][0][1],
z: lines[i][0][2]
},
end: {
x: lines[i][1][0],
y: lines[i][1][1],
z: lines[i][1][2]
}
});
// console.log(a)
}
viewer.addSphere({
center: { x: 10, y: 10, z: 10 },
radius: 1.0,
color: 'red',
clickable: true,
callback: () => {
alert(123)
}
})
viewer.setProjection('orthographic')
viewer.zoomTo();
viewer.render();
viewer.zoom(0.8, 0);
</script>