Skip to content

Commit 00548eb

Browse files
davidpiegzadavidpiegza
committed
Update sphere drawing
1 parent 70a738a commit 00548eb

File tree

2 files changed

+54
-57
lines changed

2 files changed

+54
-57
lines changed

‎drawings/sphere_graph.js

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
@author David Piegza
33
44
Implements a sphere graph drawing with force-directed placement.
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 SphereGraph object:
12-
12+
1313
<!DOCTYPE html>
1414
<html>
1515
<head>
@@ -19,7 +19,7 @@
1919
<body onload="new Drawing.SphereGraph({showStats: true, showInfo: true})">
2020
</bod>
2121
</html>
22-
22+
2323
Parameters:
2424
options = {
2525
layout: "2d" or "3d"
@@ -35,23 +35,23 @@
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

5050
var Drawing = Drawing || {};
5151

5252
Drawing.SphereGraph = function(options) {
5353
var options = options || {};
54-
54+
5555
this.layout = options.layout || "2d";
5656
this.show_stats = options.showStats || false;
5757
this.show_info = options.showInfo || false;
@@ -60,19 +60,19 @@ Drawing.SphereGraph = function(options) {
6060
this.nodes_count = options.numNodes || 20;
6161
this.edges_count = options.numEdges || 10;
6262

63-
var camera, scene, renderer, interaction, geometry, object_selection;
63+
var camera, controls, scene, renderer, interaction, geometry, object_selection;
6464
var stats;
6565
var info_text = {};
6666
var graph = new Graph({limit: options.limit});
67-
67+
6868
var geometries = [];
6969

7070
var sphere_radius = 4900;
7171
var max_X = sphere_radius;
7272
var min_X = -sphere_radius;
7373
var max_Y = sphere_radius;
7474
var min_Y = -sphere_radius;
75-
75+
7676
var that=this;
7777

7878
init();
@@ -81,38 +81,35 @@ Drawing.SphereGraph = function(options) {
8181

8282
function init() {
8383
// Three.js initialization
84-
renderer = new THREE.WebGLRenderer({antialias: true});
84+
renderer = new THREE.WebGLRenderer({alpha: true});
8585
renderer.setSize( window.innerWidth, window.innerHeight );
86-
87-
camera = new THREE.TrackballCamera({
88-
fov: 35,
89-
aspect: window.innerWidth / window.innerHeight,
90-
near: 1,
91-
far: 100000,
92-
93-
rotateSpeed: 0.5,
94-
zoomSpeed: 5.2,
95-
panSpeed: 1,
96-
97-
noZoom: false,
98-
noPan: false,
99-
100-
staticMoving: false,
101-
dynamicDampingFactor: 0.3,
102-
103-
domElement: renderer.domElement,
104-
105-
keys: [ 65, 83, 68 ]
106-
});
86+
87+
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 100000);
10788
camera.position.z = 10000;
10889

90+
controls = new THREE.TrackballControls(camera);
91+
92+
controls.rotateSpeed = 0.5;
93+
controls.zoomSpeed = 5.2;
94+
controls.panSpeed = 1;
95+
96+
controls.noZoom = false
97+
controls.noPan = false;
98+
99+
controls.staticMoving = false;
100+
controls.dynamicDampingFactor = 0.3;
101+
102+
controls.keys = [ 65, 83, 68 ];
103+
104+
controls.addEventListener('change', render);
105+
109106
scene = new THREE.Scene();
110107

111108
// Create sphere geometry and add it to the scene
112109
var sphere_geometry = new THREE.SphereGeometry(sphere_radius, 110, 100);
113110
material = new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.8 });
114-
mesh = new THREE.Mesh(sphere_geometry, material);
115-
scene.addObject(mesh);
111+
mesh = new THREE.Mesh(sphere_geometry, material);
112+
scene.add(mesh);
116113

117114
// Create node geometry (will be used in drawNode())
118115
geometry = new THREE.SphereGeometry( 25, 25, 0 );
@@ -127,13 +124,13 @@ Drawing.SphereGraph = function(options) {
127124
info_text.select = "Object " + obj.id;
128125
} else {
129126
delete info_text.select;
130-
}
127+
}
131128
}
132129
});
133130
}
134131

135132
document.body.appendChild( renderer.domElement );
136-
133+
137134
// Stats.js
138135
if(that.show_stats) {
139136
stats = new Stats();
@@ -151,7 +148,7 @@ Drawing.SphereGraph = function(options) {
151148
document.body.appendChild( info );
152149
}
153150
}
154-
151+
155152

156153
/**
157154
* Creates a graph with random nodes and edges.
@@ -165,7 +162,7 @@ Drawing.SphereGraph = function(options) {
165162

166163
var nodes = [];
167164
nodes.push(node);
168-
165+
169166
var steps = 1;
170167
while(nodes.length != 0 && steps < that.nodes_count) {
171168
var node = nodes.shift();
@@ -183,14 +180,14 @@ Drawing.SphereGraph = function(options) {
183180
}
184181
steps++;
185182
}
186-
183+
187184
// Transform a lat, lng-position to x,y.
188185
graph.layout = new Layout.ForceDirected(graph, {width: 2000, height: 2000, iterations: 1000, positionUpdated: function(node) {
189186
max_X = Math.max(max_X, node.position.x);
190187
min_X = Math.min(min_X, node.position.x);
191188
max_Y = Math.max(max_Y, node.position.y);
192189
min_Y = Math.min(min_Y, node.position.y);
193-
190+
194191
var lat, lng;
195192
if(node.position.x < 0) {
196193
lat = (-90/min_X) * node.position.x;
@@ -209,7 +206,7 @@ Drawing.SphereGraph = function(options) {
209206
node.data.draw_object.position.x = area * Math.sin(phi) * Math.cos(theta);
210207
node.data.draw_object.position.y = area * Math.cos(phi);
211208
node.data.draw_object.position.z = area * Math.sin(phi) * Math.sin(theta);
212-
209+
213210
}});
214211
graph.layout.init();
215212
info_text.nodes = "Nodes " + graph.nodes.length;
@@ -221,25 +218,25 @@ Drawing.SphereGraph = function(options) {
221218
* Create a node object and add it to the scene.
222219
*/
223220
function drawNode(node) {
224-
var draw_object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ] );
221+
var draw_object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
225222

226223
var area = 2000;
227224
draw_object.position.x = Math.floor(Math.random() * (area + area + 1) - area);
228225
draw_object.position.y = Math.floor(Math.random() * (area + area + 1) - area);
229-
226+
230227
node.position.x = Math.floor(Math.random() * (area + area + 1) - area);
231228
node.position.y = Math.floor(Math.random() * (area + area + 1) - area);
232-
229+
233230
draw_object.id = node.id;
234231
node.data.draw_object = draw_object;
235232
node.layout = {}
236233
node.layout.max_X = 90;
237234
node.layout.min_X = -90;
238235
node.layout.max_Y = 180;
239236
node.layout.min_Y = -180;
240-
237+
241238
// node.position = draw_object.position;
242-
scene.addObject( node.data.draw_object );
239+
scene.add( node.data.draw_object );
243240
}
244241

245242

@@ -250,23 +247,22 @@ Drawing.SphereGraph = function(options) {
250247
material = new THREE.LineBasicMaterial( { color: 0xCCCCCC, opacity: 0.5, linewidth: 0.5 } );
251248
var tmp_geo = new THREE.Geometry();
252249

253-
tmp_geo.vertices.push(new THREE.Vertex(source.data.draw_object.position));
254-
tmp_geo.vertices.push(new THREE.Vertex(target.data.draw_object.position));
250+
tmp_geo.vertices.push(source.data.draw_object.position);
251+
tmp_geo.vertices.push(target.data.draw_object.position);
255252

256253
line = new THREE.Line( tmp_geo, material, THREE.LinePieces );
257254
line.scale.x = line.scale.y = line.scale.z = 1;
258255
line.originalScale = 1;
259256

260-
line.geometry.__dirtyVertices = true;
261-
262257
geometries.push(tmp_geo);
263258

264-
scene.addObject( line );
259+
scene.add( line );
265260
}
266261

267262

268263
function animate() {
269264
requestAnimationFrame( animate );
265+
controls.update();
270266
render();
271267
if(that.show_info) {
272268
printInfo();
@@ -282,12 +278,12 @@ Drawing.SphereGraph = function(options) {
282278
} else {
283279
info_text.calc = "";
284280
}
285-
281+
286282
// Update position of lines (edges)
287283
for(var i=0; i<geometries.length; i++) {
288-
geometries[i].__dirtyVertices = true;
284+
geometries[i].verticesNeedUpdate = true;
289285
}
290-
286+
291287
// set lookat of nodes to camera
292288
for(var i=0; i<graph.nodes.length; i++) {
293289
graph.nodes[i].data.draw_object.lookAt(camera.position);
@@ -297,7 +293,7 @@ Drawing.SphereGraph = function(options) {
297293
if(that.selection) {
298294
object_selection.render(scene, camera);
299295
}
300-
296+
301297
// update stats
302298
if(that.show_stats) {
303299
stats.update();

‎index_example.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<script type="text/javascript" src="utils/ObjectSelection.js"></script>
2424
<script type="text/javascript" src="layouts/force-directed-layout.js"></script>
2525
<script type="text/javascript" src="drawings/simple_graph.js"></script>
26+
<script type="text/javascript" src="drawings/sphere_graph.js"></script>
2627

2728
<script type="text/javascript">
2829
var drawing;

0 commit comments

Comments
 (0)