Merge pull request #12 from davidpiegza/update-to-three-js-r83

davidpiegza · web-flow · commit 6feb7b9949a3 · 2017-01-14T18:14:45.000+01:00
Update to three.js r83
diff --git a/build/README.md b/build/README.md
@@ -0,0 +1,6 @@
+# Create minified version
+
+Using `uglifyjs`:
+
+    npm install uglify-js -g
+    uglifyjs -c -m -- Graph.js webgl-frameworks/Three.js utils/*.js layouts/*.js drawings/*.js > build/graph.min.js
diff --git a/build/graph.min.js b/build/graph.min.js
diff --git a/drawings/simple_graph.js b/drawings/simple_graph.js
@@ -76,8 +76,10 @@ Drawing.SimpleGraph = function(options) {
 
   function init() {
     // Three.js initialization
-    renderer = new THREE.WebGLRenderer({alpha: true});
-    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
 
     camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000000);
     camera.position.z = 5000;
@@ -102,9 +104,9 @@ Drawing.SimpleGraph = function(options) {
 
     // Node geometry
     if(that.layout === "3d") {
-      geometry = new THREE.CubeGeometry( 25, 25, 25 );
+      geometry = new THREE.BoxGeometry( 25, 25, 25 );
     } else {
-      geometry = new THREE.CubeGeometry( 50, 50, 0 );
+      geometry = new THREE.BoxGeometry( 50, 50, 0 );
     }
 
     // Create node selection, if set
@@ -226,16 +228,20 @@ Drawing.SimpleGraph = function(options) {
    *  Create an edge object (line) and add it to the scene.
    */
   function drawEdge(source, target) {
-      material = new THREE.LineBasicMaterial({ color: 0xff0000, opacity: 1, linewidth: 0.5 });
+      material = new THREE.LineBasicMaterial({ color: 0xff0000, opacity: 1, linewidth: 1 });
 
       var tmp_geo = new THREE.Geometry();
       tmp_geo.vertices.push(source.data.draw_object.position);
       tmp_geo.vertices.push(target.data.draw_object.position);
 
-      line = new THREE.Line( tmp_geo, material, THREE.LinePieces );
+      line = new THREE.LineSegments( tmp_geo, material );
       line.scale.x = line.scale.y = line.scale.z = 1;
       line.originalScale = 1;
 
+      // NOTE: Deactivated frustumCulled, otherwise it will not draw all lines (even though
+      // it looks like the lines are in the view frustum).
+      line.frustumCulled = false;
+
       geometries.push(tmp_geo);
 
       scene.add( line );
diff --git a/drawings/sphere_graph.js b/drawings/sphere_graph.js
@@ -250,7 +250,7 @@ Drawing.SphereGraph = function(options) {
     tmp_geo.vertices.push(source.data.draw_object.position);
     tmp_geo.vertices.push(target.data.draw_object.position);
 
-    line = new THREE.Line( tmp_geo, material, THREE.LinePieces );
+    line = new THREE.LineSegments( tmp_geo, material );
     line.scale.x = line.scale.y = line.scale.z = 1;
     line.originalScale = 1;
 
diff --git a/index_example.html b/index_example.html
@@ -14,6 +14,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
     <title>Graph Visualization</title>
     <script type="text/javascript" src="Graph.js"></script>
     <script type="text/javascript" src="webgl-frameworks/three.min.js"></script>
diff --git a/utils/Label.js b/utils/Label.js
@@ -37,8 +37,18 @@ THREE.Label = function(text, parameters) {
     xc.textBaseline = 'top';
     xc.fillText(text, 0, 0);
 
-    var geometry = new THREE.CubeGeometry(len, 200, 0);
-    var xm = new THREE.MeshBasicMaterial({map: new THREE.Texture(labelCanvas), transparent: true});
+    var geometry = new THREE.BoxGeometry(len, 200, 0);
+    var xm = new THREE.MeshBasicMaterial({
+      map: new THREE.CanvasTexture(
+        labelCanvas,
+        THREE.UVMapping,
+        THREE.ClampToEdgeWrapping,
+        THREE.ClampToEdgeWrapping,
+        THREE.LinearFilter,
+        THREE.LinearFilter
+      ),
+      transparent: true
+    });
     xm.map.needsUpdate = true;
 
     // set text canvas to cube geometry
diff --git a/utils/ObjectSelection.js b/utils/ObjectSelection.js
@@ -16,7 +16,6 @@ THREE.ObjectSelection = function(parameters) {
   var parameters = parameters || {};
 
   this.domElement = parameters.domElement || document;
-  this.projector = new THREE.Projector();
   this.INTERSECTED;
 
   var _this = this;
@@ -42,7 +41,7 @@ THREE.ObjectSelection = function(parameters) {
 
   this.render = function(scene, camera) {
     var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
-    this.projector.unprojectVector( vector, camera );
+    vector.unproject(camera);
 
     var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
 
diff --git a/webgl-frameworks/Three.js b/webgl-frameworks/Three.js
diff --git a/webgl-frameworks/three.min.js b/webgl-frameworks/three.min.js
