Improve routes + add option for sprites

Author: gbiobob

README.md

@@ -1,6 +1,6 @@
 # ED3D-Galaxy-Map
 ED3D-Galaxy-Map is a 3D galactic map (web app) for the game Elite: Dangerous.
-Work with JSon file to embed stelar systems data.
+Work with JSon file to embed stellar systems data.
 
 ## Demo
 * [Elite: Dangerous Milky Way](http://en.ed-board.net/3Dgalaxy/)
@@ -30,24 +30,30 @@ Require Three.js (r75) & JQuery
 
 **basePath:** Custom base path
 
-**withHudPanel:** Enable the HUD (panel to filter and navigate throughout systems). *Default: false*
-
-**withOptionsPanel:** Enable the HUD (panel to filter and navigate throughout systems). *Default: false*
-
-**hudMultipleSelect:** Enable showing multiple filters at same time *Default: true*
-
-**showGalaxyInfos:** Show Milky Way info on start *Default: false*
+### Sprites
+**starSprite:** Add a custom sprite image for stars, exemple for round stars: ```"textures/lensflare/star_round.png"``` (default: ```"textures/lensflare/star_grey2.png"```)
 
 **systemColor:** Set custom color(Hex) for system's sprite *Default: #eeeeee*
 
 **effectScaleSystem:** Set an array with min & max value for system scale effect (sprite size) on zoom in/out *Default: [10,800]*
 
+### Camera
 **startAnim:** Use initial animation (Zoom into the galaxy) *Default: true*
 
 **playerPos: [x,y,z]** Player position, ex.:```[150,269,28]``` (used for initial camera target position)  *Default: [0,0,0]*
 
 **cameraPos: [x,y,z]** Initial camera position, ex.:```[0,45000,-45000]``` (used for initial camera position)
 
+### Hud
+**withHudPanel:** Enable the HUD (panel to filter and navigate throughout systems). *Default: false*
+
+**withOptionsPanel:** Enable the HUD (panel to filter and navigate throughout systems). *Default: false*
+
+**hudMultipleSelect:** Enable showing multiple filters at same time *Default: true*
+
+### Labels
+**showGalaxyInfos:** Show Milky Way info on start *Default: false*
+
 **showNameNear:** Show labels close from the camera target (Default: false)
 
 ## Methods

demo_galnet.html

@@ -49,6 +49,7 @@
         hudMultipleSelect : false,
         effectScaleSystem : [28,1000],
         startAnim: true,
+        starSprite: "textures/lensflare/star_round.png",
         showNameNear: true //-- EXPERIMENTAL (Show name from systems near camera)
     });
 

demo_routes.html

@@ -81,10 +81,12 @@ <h1>Milky Way</h1>
         effectScaleSystem : [50,10000],
         startAnim: true,
         showGalaxyInfos: true,
-        systemColor: '#FF9D00'
+        systemColor: '#FF9D00',
+        playerPos: [25,-2100,-3900],
+        cameraPos: [25,9100,-7900],
     });
 
   </script>
 
 </body>
-</html>
+</html>

js/components/action.class.js

@@ -302,7 +302,7 @@ var Action = {
 
           $('#debug').html(Math.round(intersection.point.x)+' , '+Math.round(-intersection.point.z));
 
-          Route.addPoint(Math.round(intersection.point.x),0,Math.round(-intersection.point.z));
+          //Route.addPointToRoute(Math.round(intersection.point.x),0,Math.round(-intersection.point.z));
 
         }
       }

js/components/hud.class.js

@@ -27,6 +27,7 @@ var HUD = {
         '  <div id="controls">'+
         '    <a data-view="3d" class="view selected">3D</a>'+
         '    <a data-view="top" class="view">2D</a>'+
+        //'    <a data-view="top" class="view">RED</a>'+  // TMP route edit button
         '    <a data-view="infos" class="'+(Ed3d.showGalaxyInfos ? 'selected' : '')+'">i</a>'+
         '    <a data-view="options">'+Ico.cog+'</a>'+
         '    <div id="options" style="display:none;"></div>'+

js/components/route.class.js

@@ -58,12 +58,8 @@ var Route = {
         geometryL.vertices.push(
           new THREE.Vector3(c[0], c[1], c[2])
         );
-        Route.addPoint(c[0], c[1], c[2]);
+        //Route.addPoint(c[0], c[1], c[2]);
 
-        /*var geometry = new THREE.SphereGeometry(3, 10, 10);
-        var sphere = new THREE.Mesh(geometry, Ed3d.material.white);
-        sphere.position.set(x, y, z);
-        scene.add(sphere);*/
 
       } else {
 
@@ -84,10 +80,11 @@ var Route = {
   },
 
   'addCircle' : function(point) {
+
     var cursor = new THREE.Object3D;
 
     //-- Ring around the system
-    var geometryL = new THREE.TorusGeometry( 12, 0.4, 3, 30 );
+    var geometryL = new THREE.TorusGeometry( 4, 0.4, 3, 15 );
 
     var selection = new THREE.Mesh(geometryL, Ed3d.material.orange);
     selection.rotation.x = Math.PI / 2;
@@ -99,13 +96,17 @@ var Route = {
     cursor.scale.set(15,15,15);
 
     scene.add(cursor);
+
+    //-- Add to cursor list for scale effets
+    Action.cursor[cursor.id] = cursor;
+
   },
 
-  'addPoint' : function(x, y, z) {
+  'addPoint' : function(x, y, z, name) {
 
     /*console.log('Add point route');*/
 
-    /*var cursor = new THREE.Object3D;
+    var cursor = new THREE.Object3D;
 
     //-- Ring around the system
     var geometryL = new THREE.TorusGeometry( 12, 0.4, 3, 30 );
@@ -130,12 +131,68 @@ var Route = {
     cursor.add(coneInner);
 
 
-    cursor.position.set(x, y, -z);
+    cursor.position.set(x, y, z);
 
     cursor.scale.set(30,30,30);
 
-    scene.add(cursor);*/
-  }
+    scene.add(cursor);
+
+  },
+
+  'newRoute' : function(name) {
+    var routes = localStorage.getItem("routes");
+    if(routes == undefined) {
+      var routes = [];
+    }
+
+    var myRoute = {
+      title: "Test route",
+      points: []
+    }
+
+    routes.push(myRoute);
+    routes.push(myRoute);
+    routes.push(myRoute);
+
+    localStorage.setItem("routes",JSON.stringify(routes));
+  },
+
+  'addPointToRoute' : function(x,y,z,system,label) {
+
+    idRoute = 1;
+
+    console.log('add point');
+
+    var routes = JSON.parse(localStorage.getItem("routes"));
+    if(routes[idRoute] == undefined) return false;
+
+    var point = {
+      "coords": {"x":x, "y":y, "z":z }
+    }
+    if(system==undefined) system = Math.floor(Date.now() / 1000);
+
+    if(system != undefined) point.s = system;
+    if(label != undefined) point.label = label;
+
+    routes[idRoute].points.push(point);
+
+    localStorage.setItem("routes",JSON.stringify(routes));
+
+
+
+    this.drawRoute(1);
+  },
+
+  'drawRoute': function(idRoute) {
+
+    var route = JSON.parse(localStorage.getItem("routes"))[idRoute];
+    if(route == undefined) return false;
+
+    this.initRoute(0,route);
+    this.createRoute(0,route);
+
+  },
+
 
 
 }

js/ed3dmap.js

@@ -77,10 +77,10 @@ var Ed3d = {
     }),
     'glow_1'            : null,
     'custom'            : []
+  },
 
+  'starSprite' : 'textures/lensflare/star_grey2.png',
 
-
-  },
   'colors'              : [],
   'textures'            : {},
 
@@ -287,7 +287,7 @@ var Ed3d = {
 
     //-- Load textures
     this.textures.flare_white = texloader.load(Ed3d.basePath + "textures/lensflare/flare2.png");
-    this.textures.flare_yellow = texloader.load(Ed3d.basePath + "textures/lensflare/star_grey2.png");
+    this.textures.flare_yellow = texloader.load(Ed3d.basePath + Ed3d.starSprite);
     this.textures.flare_center = texloader.load(Ed3d.basePath + "textures/lensflare/flare3.png");
 
     //-- Load sprites
@@ -475,6 +475,7 @@ var Ed3d = {
         $.each(data.routes, function(key, route) {
           Route.createRoute(key, route);
         });
+
       }
 
   },

js/ed3dmap.min.js

@@ -1,13 +1,5 @@
 {
   "systems": [
-    {
-      "name": "Wolf 906",
-      "coords": {
-          "x": "-27",
-          "y": "-25",
-          "z": "29"
-      }
-    },
     {
       "name": "Checkpoint 1",
       "coords": {