Skip to content

Commit 25f596a

Browse files
davidpiegzadavidpiegza
committed
Merge pull request #5 from davidpiegza/update-to-three-js-r66
Update to three js r66
2 parents 8a3cbc6 + 5a56898 commit 25f596a

13 files changed

Lines changed: 39233 additions & 1005 deletions

‎README.markdown‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The project consists of
2424

2525
### Graph Structure ###
2626

27-
This is implemented in graph-visualization/Graph.js.
27+
This is implemented in graph-visualization/Graph.js.
2828

2929
Usage:
3030

@@ -40,8 +40,8 @@ Node:
4040
A node has the properties
4141

4242
- `ID`
43-
- `nodesTo`, Array with connected nodes
44-
- `nodesFrom`, Array with connected nodes
43+
- `nodesTo`, Array with connected nodes
44+
- `nodesFrom`, Array with connected nodes
4545
- `position`, Object for x, y, z position, default is {}
4646
- `data`, Object with further properties, e.g. properties for a graph layout
4747

@@ -56,7 +56,7 @@ A graph layout has the basic structure:
5656
this.init = function() {
5757
...
5858
};
59-
59+
6060
this.generate = function() {
6161
...
6262
};
@@ -68,4 +68,10 @@ The graph layout gets the created graph and calculates new positions for the nod
6868

6969
The graph layout may extend the nodes and edges with custom properties in the data object.
7070

71-
See [force-based-layout.js](https://github.com/davidpiegza/Graph-Visualization/blob/master/layouts/force-based-layout.js) for example usage.
71+
See [force-based-layout.js](https://github.com/davidpiegza/Graph-Visualization/blob/master/layouts/force-based-layout.js) for example usage.
72+
73+
74+
Changelog
75+
-------------------
76+
77+
See [releases](https://github.com/davidpiegza/Graph-Visualization/releases).

‎build/graph-min.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎build/graph.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎drawings/simple_graph.js‎

Lines changed: 58 additions & 60 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,55 +195,56 @@ 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);
206203
} else {
207204
var label_object = new THREE.Label(node.id);
208205
}
209206
node.data.label_object = label_object;
210-
scene.addObject( node.data.label_object );
207+
scene.add( node.data.label_object );
211208
}
212209

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,15 +285,15 @@ 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 {
294292
var length = graph.nodes.length;
295293
for(var i=0; i<length; i++) {
296294
var node = graph.nodes[i];
297295
if(node.data.label_object != undefined) {
298-
scene.removeObject( node.data.label_object );
296+
scene.remove( node.data.label_object );
299297
node.data.label_object = undefined;
300298
}
301299
}
@@ -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)