Newer
Older
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
<head>
<style> body { margin: 0; } </style>
<title>MetaVoxel</title>
<script src="//unpkg.com/three"></script>
<script type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js"></script>
<script src="../lib/dat.gui.js"></script>
<script src="../lib/js-colormaps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//unpkg.com/3d-force-graph"></script>
<!-- <script src="../lib/3d-force-graph.js"></script> -->
<script src="//unpkg.com/three-spritetext"></script>
<script src="../visualization/geometry.js"></script>
<script src="../visualization/utils.js"></script>
<script src="../visualization/drawGraph.js"></script>
<script src="./HW4.js"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
var setup;
rhino3dm().then(async m => {
console.log('Loaded rhino3dm.');
_rhino3dm = m; // global
var size=5;
var truss={
nnx:3,
nny:4,
nnz:2,
dx:size,
dy:size,
dz:size,
localConnections:true,
equals : function(other) {
return other.localConnections == this.localConnections &&
other.nnx == this.nnx &&
other.nny == this.nny &&
other.nnz == this.nnz;
}
}
var prevTruss=JSON.parse(JSON.stringify(truss));
setup=createTruss(truss);
scale=10.0;
var container='3d-graph';
var Graph=drawGraph(container,setup,scale,false);
var gui = new dat.GUI();
var params=[];
params.push(gui.add(truss, 'nnx', 1, 5.0).step(1).listen());
params.push(gui.add(truss, 'nny', 1, 5.0).step(1).listen());
params.push(gui.add(truss, 'nnz', 1, 5.0).step(1).listen());
params.push(gui.add(truss, 'localConnections').listen());
for (var i=0;i<params.length;i++) {
params[i].onChange(function(value) {
if(truss.equals(prevTruss)){
}else{
prevTruss=JSON.parse(JSON.stringify(truss));
setup=createTruss(truss);
updateGraph(Graph,setup,scale);
}
});
}
});
</script>
</body>