Skip to content

Commit 4eedbaa

Browse files
davidpiegzadavidpiegza
committed
Update simple_graph drawing using latest three.js api
1 parent 8a3cbc6 commit 4eedbaa

File tree

1 file changed

+56
-58
lines changed

1 file changed

+56
-58
lines changed

‎drawings/simple_graph.js

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
@author David Piegza
33
44
Implements a simple graph drawing with force-directed placement in 2D and 3D.
5-
5+
66
It uses the force-directed-layout implemented in:
77
https://github.com/davidpiegza/Graph-Visualization/blob/master/layouts/force-directed-layout.js
8-
8+
99
Drawing is done with Three.js: http://github.com/mrdoob/three.js
1010
1111
To use this drawing, include the graph-min.js file and create a SimpleGraph object:
12-
12+
1313
<!DOCTYPE html>
1414
<html>
1515
<head>
@@ -19,7 +19,7 @@
1919
<body onload="new Drawing.SimpleGraph({layout: '3d', showStats: true, showInfo: true})">
2020
</bod>
2121
</html>
22-
22+
2323
Parameters:
2424
options = {
2525
layout: "2d" or "3d"
@@ -35,22 +35,22 @@
3535
3636
3737
limit: <int>, maximum number of nodes
38-
38+
3939
numNodes: <int> - sets the number of nodes to create.
40-
numEdges: <int> - sets the maximum number of edges for a node. A node will have
40+
numEdges: <int> - sets the maximum number of edges for a node. A node will have
4141
1 to numEdges edges, this is set randomly.
4242
}
43-
43+
4444
4545
Feel free to contribute a new drawing!
4646
4747
*/
48-
48+
4949
var Drawing = Drawing || {};
5050

5151
Drawing.SimpleGraph = function(options) {
5252
var options = options || {};
53-
53+
5454
this.layout = options.layout || "2d";
5555
this.layout_options = options.graphLayout || {};
5656
this.show_stats = options.showStats || false;
@@ -61,13 +61,13 @@ Drawing.SimpleGraph = function(options) {
6161
this.nodes_count = options.numNodes || 20;
6262
this.edges_count = options.numEdges || 10;
6363

64-
var camera, scene, renderer, interaction, geometry, object_selection;
64+
var camera, controls, scene, renderer, interaction, geometry, object_selection;
6565
var stats;
6666
var info_text = {};
6767
var graph = new Graph({limit: options.limit});
68-
68+
6969
var geometries = [];
70-
70+
7171
var that=this;
7272

7373
init();
@@ -76,40 +76,37 @@ Drawing.SimpleGraph = function(options) {
7676

7777
function init() {
7878
// Three.js initialization
79-
renderer = new THREE.WebGLRenderer({antialias: true});
79+
renderer = new THREE.WebGLRenderer({alpha: true});
8080
renderer.setSize( window.innerWidth, window.innerHeight );
81-
82-
camera = new THREE.TrackballCamera({
83-
fov: 40,
84-
aspect: window.innerWidth / window.innerHeight,
85-
near: 1,
86-
far: 1000000,
87-
88-
rotateSpeed: 0.5,
89-
zoomSpeed: 5.2,
90-
panSpeed: 1,
91-
92-
noZoom: false,
93-
noPan: false,
94-
95-
staticMoving: false,
96-
dynamicDampingFactor: 0.3,
97-
98-
domElement: renderer.domElement,
99-
100-
keys: [ 65, 83, 68 ]
101-
});
81+
82+
camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000000);
10283
camera.position.z = 5000;
10384

85+
controls = new THREE.TrackballControls(camera);
86+
87+
controls.rotateSpeed = 0.5;
88+
controls.zoomSpeed = 5.2;
89+
controls.panSpeed = 1;
90+
91+
controls.noZoom = false;
92+
controls.noPan = false;
93+
94+
controls.staticMoving = false;
95+
controls.dynamicDampingFactor = 0.3;
96+
97+
controls.keys = [ 65, 83, 68 ];
98+
99+
controls.addEventListener('change', render);
100+
104101
scene = new THREE.Scene();
105102

106103
// Node geometry
107104
if(that.layout === "3d") {
108-
geometry = new THREE.SphereGeometry( 25, 25, 25 );
105+
geometry = new THREE.CubeGeometry( 25, 25, 25 );
109106
} else {
110-
geometry = new THREE.SphereGeometry( 50, 50, 0 );
107+
geometry = new THREE.CubeGeometry( 50, 50, 0 );
111108
}
112-
109+
113110
// Create node selection, if set
114111
if(that.selection) {
115112
object_selection = new THREE.ObjectSelection({
@@ -128,7 +125,7 @@ Drawing.SimpleGraph = function(options) {
128125
}
129126

130127
document.body.appendChild( renderer.domElement );
131-
128+
132129
// Stats.js
133130
if(that.show_stats) {
134131
stats = new Stats();
@@ -146,7 +143,7 @@ Drawing.SimpleGraph = function(options) {
146143
document.body.appendChild( info );
147144
}
148145
}
149-
146+
150147

151148
/**
152149
* Creates a graph with random nodes and edges.
@@ -172,7 +169,7 @@ Drawing.SimpleGraph = function(options) {
172169
var target_node = new Node(i*steps);
173170
if(graph.addNode(target_node)) {
174171
target_node.data.title = "This is node " + target_node.id;
175-
172+
176173
drawNode(target_node);
177174
nodes.push(target_node);
178175
if(graph.addEdge(node, target_node)) {
@@ -181,8 +178,8 @@ Drawing.SimpleGraph = function(options) {
181178
}
182179
}
183180
steps++;
184-
}
185-
181+
}
182+
186183
that.layout_options.width = that.layout_options.width || 2000;
187184
that.layout_options.height = that.layout_options.height || 2000;
188185
that.layout_options.iterations = that.layout_options.iterations || 100000;
@@ -198,8 +195,8 @@ Drawing.SimpleGraph = function(options) {
198195
* Create a node object and add it to the scene.
199196
*/
200197
function drawNode(node) {
201-
var draw_object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) ] );
202-
198+
var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
199+
203200
if(that.show_labels) {
204201
if(node.data.title != undefined) {
205202
var label_object = new THREE.Label(node.data.title);
@@ -213,40 +210,41 @@ Drawing.SimpleGraph = function(options) {
213210
var area = 5000;
214211
draw_object.position.x = Math.floor(Math.random() * (area + area + 1) - area);
215212
draw_object.position.y = Math.floor(Math.random() * (area + area + 1) - area);
216-
213+
217214
if(that.layout === "3d") {
218215
draw_object.position.z = Math.floor(Math.random() * (area + area + 1) - area);
219216
}
220217

221218
draw_object.id = node.id;
222219
node.data.draw_object = draw_object;
223220
node.position = draw_object.position;
224-
scene.addObject( node.data.draw_object );
221+
scene.add( node.data.draw_object );
225222
}
226223

227224

228225
/**
229226
* Create an edge object (line) and add it to the scene.
230227
*/
231228
function drawEdge(source, target) {
232-
material = new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 1, linewidth: 0.5 } );
229+
material = new THREE.LineBasicMaterial({ color: 0xff0000, opacity: 1, linewidth: 0.5 });
230+
233231
var tmp_geo = new THREE.Geometry();
234-
235-
tmp_geo.vertices.push(new THREE.Vertex(source.data.draw_object.position));
236-
tmp_geo.vertices.push(new THREE.Vertex(target.data.draw_object.position));
232+
tmp_geo.vertices.push(source.data.draw_object.position);
233+
tmp_geo.vertices.push(target.data.draw_object.position);
237234

238235
line = new THREE.Line( tmp_geo, material, THREE.LinePieces );
239236
line.scale.x = line.scale.y = line.scale.z = 1;
240237
line.originalScale = 1;
241-
238+
242239
geometries.push(tmp_geo);
243-
244-
scene.addObject( line );
240+
241+
scene.add( line );
245242
}
246243

247244

248245
function animate() {
249246
requestAnimationFrame( animate );
247+
controls.update();
250248
render();
251249
if(that.show_info) {
252250
printInfo();
@@ -265,7 +263,7 @@ Drawing.SimpleGraph = function(options) {
265263

266264
// Update position of lines (edges)
267265
for(var i=0; i<geometries.length; i++) {
268-
geometries[i].__dirtyVertices = true;
266+
geometries[i].verticesNeedUpdate = true;
269267
}
270268

271269

@@ -287,7 +285,7 @@ Drawing.SimpleGraph = function(options) {
287285
var label_object = new THREE.Label(node.id, node.data.draw_object);
288286
}
289287
node.data.label_object = label_object;
290-
scene.addObject( node.data.label_object );
288+
scene.add( node.data.label_object );
291289
}
292290
}
293291
} else {
@@ -310,7 +308,7 @@ Drawing.SimpleGraph = function(options) {
310308
if(that.show_stats) {
311309
stats.update();
312310
}
313-
311+
314312
// render scene
315313
renderer.render( scene, camera );
316314
}
@@ -333,9 +331,9 @@ Drawing.SimpleGraph = function(options) {
333331
function randomFromTo(from, to) {
334332
return Math.floor(Math.random() * (to - from + 1) + from);
335333
}
336-
334+
337335
// Stop layout calculation
338336
this.stop_calculating = function() {
339337
graph.layout.stop_calculating();
340338
}
341-
}
339+
}

0 commit comments

Comments
 (0)