-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
116 lines (104 loc) · 2.45 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rnn-viewer</title>
<style>
body {
background-color: #000000;
margin: 0;
overflow: hidden;
}
#container {
cursor:pointer;
z-index: 0;
width: 100%;
height: 100vh;
}
canvas{
z-index: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div style="position: fixed; right: 5px; bottom: 5px; width: 100px; text-align: right;">
<button id="top">Top View</button>
<button id="side">Side View</button>
<button id="default">Default View</button>
</div>
</body>
<script src="node_modules/three/build/three.min.js"></script>
<script src="node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="index.js"></script>
<script>
var rnnViewer = new RNNViewer({
container: document.getElementById('container')
})
.addMatrix({
rows: 1,
columns: 10
})
.addMatrix({
rows: 20,
columns: 20
})
.addMatrix({
rows: 20,
columns: 20
})
.addMatrix({
rows: 20,
columns: 20
})
.addMatrix({
rows: 20,
columns: 20
})
.addMatrix({
rows: 1,
columns: 10
})
.render();
setInterval(function() {
var coldColor = rnnViewer.coldColor,
hotColor = rnnViewer.hotColor;
rnnViewer.values.forEach(function(value) {
var v = Math.random() * 2,
r = (coldColor.r + hotColor.r) / v,
g = (coldColor.g + hotColor.g) / v,
b = (coldColor.b + hotColor.b) / v;
value.frontFace.color.setRGB(
r,
g,
b
);
value.rearFace.color.setRGB(
r,
g,
b
);
value.square.colorsNeedUpdate = true;
//value.mesh.geometry.elementsNeedUpdate = true;
value.mesh.geometry.colorsNeedUpdate = true;
});
console.log(rnnViewer.values.length);
rnnViewer.render();
}, 200);
//Camera controls
window.addEventListener('resize', function() {
rnnViewer.camera.aspect = window.innerWidth / window.innerHeight;
rnnViewer.camera.updateProjectionMatrix();
rnnViewer.render();
}, false);
document.getElementById('top').onclick = function() {
rnnViewer.viewTop();
};
document.getElementById('side').onclick = function() {
rnnViewer.viewSide();
};
document.getElementById('default').onclick = function() {
rnnViewer.viewDefault();
};
</script>
</html>