Add multiple improvements - Released minified ED3D

css/styles.css

@@ -99,22 +99,27 @@ body {
   margin: 2px;
   background: rgba(0,0,0,0.5);
 }
-#coords {
+.coords {
   padding-bottom: 5px;
   margin-bottom: 10px;
   border-bottom: solid 1px #444;
+  font-family: "Courier New";
 }
-#coords > span {
+.coords > span {
   display: block;
-  font-weight: bold;
-  font-size: 1.1rem;
+  font-size: 1rem;
   float: left;
   width: 33%;
   text-align: center;
+  background: rgba(30,30,30,0.5);
+  padding: 5px 0;
+  line-height: 100%;
+  border: solid 3px #000;
+  box-shadow: 2px 2px 5px #000;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
-#coords:after {
+.coords:after {
   content: ' ';
   display: block;
   clear: both;

js/components/action.class.js

@@ -111,15 +111,15 @@ var Action = {
           var indexPoint = intersection.index;
           var selPoint = intersection.object.geometry.vertices[indexPoint];
 
-          $('#hud #infos').html(
-           // "<h2>"+intersection.object.name+"</h2>"
-            "<h2>"+selPoint.name+"</h2>"
-          );
+          if(selPoint.visible) {
+            $('#hud #infos').html(
+              "<h2>"+selPoint.name+"</h2>"
+            );
 
+            var isMove = Action.moveToObj(indexPoint, selPoint);
+            if(isMove) return;
+          }
 
-
-          var isMove = Action.moveToObj(indexPoint, selPoint);
-          if(isMove) return;
         }
       }
 
@@ -135,18 +135,75 @@ var Action = {
    * @param {int} indexPoint
    */
 
-  'moveNextPrev' : function (indexPoint) {
+  'moveNextPrev' : function (indexPoint, increment) {
+
+    var find = false;
+    while(!find) {
+
+      //-- If next|previous is undefined, loop to the first|last
+      if (indexPoint < 0) indexPoint = System.particleGeo.vertices.length-1;
+      else if (System.particleGeo.vertices[indexPoint] == undefined) indexPoint = 0;
+
+      if(System.particleGeo.vertices[indexPoint].visible == true) {
+        find = true;
+      } else {
+        indexPoint += increment
+      }
+    }
 
-    //-- If next|previous is undefined, loop to the first|last
-    if (indexPoint < 0) indexPoint = System.particleGeo.vertices.length-1;
-    else if (System.particleGeo.vertices[indexPoint] == undefined) indexPoint = 0;
 
     //-- Move to
     var selPoint = System.particleGeo.vertices[indexPoint];
     Action.moveToObj(indexPoint, selPoint);
 
   },
 
+  /**
+   * Disable current selection
+   */
+
+  'disableSelection' : function () {
+
+    this.oldSel = null;
+    this.cursorSel.visible = false;
+
+    $('#hud #infos').html('');
+
+  },
+
+  /**
+   * Move to inital position
+   */
+  'moveInitalPosition' : function (timer) {
+
+    if(timer == undefined) timer = 800;
+
+    //-- Move camera to initial position
+
+    var moveFrom = {
+      x: camera.position.x, y: camera.position.y , z: camera.position.z,
+      mx: controls.center.x, my: controls.center.y , mz: controls.center.z
+    };
+    var moveCoords = {
+      x: 0, y: 500, z: 500,
+      mx: 0, my: 0 , mz: 0
+    };
+
+    controls.enabled = false;
+    Ed3d.tween = new TWEEN.Tween(moveFrom).to(moveCoords, timer)
+      .start()
+      .onUpdate(function () {
+        camera.position.set(moveFrom.x, moveFrom.y, moveFrom.z);
+        controls.center.set(moveFrom.mx, moveFrom.my, moveFrom.mz);
+      })
+      .onComplete(function () {
+        controls.enabled = true;
+        controls.update();
+      });
+
+  },
+
+
   /**
    * Move camera to a system
    *
@@ -253,6 +310,7 @@ var Action = {
       scene.add(this.cursorSel);
     }
 
+    this.cursorSel.visible = true;
     this.cursorSel.position.set(x, y, z);
     this.cursorSel.scale.set(1, 1, 1);
 

js/components/galaxy.class.js

@@ -38,6 +38,14 @@ var Galaxy = {
       //get height data from img
       Galaxy.getHeightData(img);
 
+
+      //-- If using start animation: launch it
+      if(Ed3d.startAnim) {
+        camera.position.set(-10000, 40000, 50000);
+        Action.moveInitalPosition(4000);
+      }
+      $('#loader').hide();
+
     };
     // load img source
     img.src = Ed3d.basePath + "textures/heightmap2.jpg";

js/components/hud.class.js

@@ -17,14 +17,14 @@ var HUD = {
       '<div>'+
       '    <h2>Infos</h2>'+
       '     Dist. Sol <span id="distsol"></span>'+
-      '    <div id="coords">'+
+      '    <div id="coords" class="coords">'+
       '      <span id="cx"></span><span id="cy"></span><span id="cz"></span></div>'+
       '      <p id="infos"></p>'+
       '    </div>'+
-      '  <div id="search">'+
+      /*'  <div id="search">'+
       '    <h2>Search</h2>'+
       '    <input type="text" />'+
-      '  </div>'+
+      '  </div>'+*/
       '  <div id="filters">'+
       '  </div>'+
 
@@ -52,13 +52,14 @@ var HUD = {
 
 
     //-- Disable 3D controls when mouse hover the Hud
-    $( "#hud, #systemDetails" ).hover(
+    $( "#hud" ).hover(
       function() {
         controls.enabled = false;
       }, function() {
         controls.enabled = true;
       }
     );
+    $( "#systemDetails" ).hide();
 
     //-- Add Count filters
     $('.map_filter').each(function(e) {
@@ -73,13 +74,26 @@ var HUD = {
       var active = $(this).data('active');
       active = (Math.abs(active-1));
 
+      if(!Ed3d.hudMultipleSelect) {
+
+        $('.map_filter').addClass('disabled');
+
+        $(System.particleGeo.vertices).each(function(index, point) {
+          point.visible  = 0;
+          point.filtered = 0;
+          System.particleGeo.colors[index] = new THREE.Color('#111111');
+          active = 1;
+        });
+
+      }
+
       $(Ed3d.catObjs[idCat]).each(function(key, indexPoint) {
 
         obj = System.particleGeo.vertices[indexPoint];
 
         System.particleGeo.colors[indexPoint] = (active==1)
           ? obj.color
-          : new THREE.Color('#000000');
+          : new THREE.Color('#111111');
 
         obj.visible = (active==1);
         obj.filtered = (active==1);
@@ -90,6 +104,10 @@ var HUD = {
       });
       $(this).data('active',active);
       $(this).toggleClass('disabled');
+
+      //-- If current selection is no more visible, disable active selection
+      if(Action.oldSel != null && !Action.oldSel.visible) Action.disableSelection();
+      Action.moveInitalPosition();
     });
 
 
@@ -157,7 +175,13 @@ var HUD = {
    */
   'openHudDetails' : function() {
     $('#hud').hide();
-    $('#systemDetails').show();
+    $('#systemDetails').show().hover(
+      function() {
+        controls.enabled = false;
+      }, function() {
+        controls.enabled = true;
+      }
+    );
   },
   /**
    *
@@ -194,16 +218,17 @@ var HUD = {
     );
 
     //-- Add navigation
+
     $('<a/>', {'html': '<'})
-    .click(function(){Action.moveNextPrev(index-1);})
+    .click(function(){Action.moveNextPrev(index-1, -1);})
     .appendTo("#nav");
 
     $('<a/>', {'html': 'X'})
     .click(function(){HUD.closeHudDetails();})
     .appendTo("#nav");
 
     $('<a/>', {'html': '>'})
-    .click(function(){Action.moveNextPrev(index+1);})
+    .click(function(){Action.moveNextPrev(index+1, 1);})
     .appendTo("#nav");
 
   },

js/components/system.class.js

@@ -44,6 +44,7 @@ var System = {
 
       //-- Attach name and set point as clickable
       particle.clickable = true;
+      particle.visible = true;
       particle.name = val.name;
       if(val.infos != undefined) particle.infos = val.infos;
 

js/ed3dmap.js

@@ -82,13 +82,17 @@ var Ed3d = {
 
   //-- HUD
   'withHudPanel' : false,
+  'hudMultipleSelect' : true,
 
   //-- Systems
   'systems' : [],
 
   //-- Starfield
   'starfield' : null,
 
+  //-- Start animation
+  'startAnim' : true,
+
   //-- Graphical Options
   'optDistObj' : 1500,
 
@@ -101,27 +105,35 @@ var Ed3d = {
    */
 
   'init' : function(options) {
+
     // Merge options with defaults
     var options = $.extend({
         container: Ed3d.container,
         basePath: Ed3d.basePath,
         jsonPath: Ed3d.jsonPath,
-        withHudPanel: Ed3d.withHudPanel
+        withHudPanel: Ed3d.withHudPanel,
+        hudMultipleSelect: Ed3d.hudMultipleSelect,
+        startAnim: Ed3d.startAnim
     }, options);
 
-
     $('#loader').show();
 
     //-- Set Option
-    this.basePath     = options.basePath;
-    this.container    = options.container;
-    this.jsonPath     = options.jsonPath;
-    this.withHudPanel = options.withHudPanel;
+    this.basePath          = options.basePath;
+    this.container         = options.container;
+    this.jsonPath          = options.jsonPath;
+    this.withHudPanel      = options.withHudPanel;
+    this.hudMultipleSelect = options.hudMultipleSelect;
+    this.startAnim         = options.startAnim;
 
     //-- Init 3D map container
     $('#'+Ed3d.container).append('<div id="ed3dmap"></div>');
 
+
     //-- Load dependencies
+
+    if(typeof isMinified !== 'undefined') return Ed3d.launchMap();
+
     $.when(
 
         $.getScript(Ed3d.basePath + "vendor/three-js/OrbitControls.js"),
@@ -145,6 +157,19 @@ var Ed3d = {
 
     ).done(function() {
 
+      Ed3d.launchMap();
+
+    });
+
+  },
+
+  /**
+   * Launch
+   */
+
+  'launchMap' : function() {
+
+
       Ed3d.loadTextures();
 
       Ed3d.initScene();
@@ -165,11 +190,8 @@ var Ed3d = {
       // Animate
       animate();
 
-    });
-
   },
 
-
   /**
    * Init Three.js scene
    */
@@ -226,7 +248,6 @@ var Ed3d = {
 
     camera.position.set(0, 500, 500);
 
-
     //HemisphereLight
     light = new THREE.HemisphereLight(0xffffff, 0xcccccc);
     scene.add(light);
@@ -304,8 +325,6 @@ var Ed3d = {
       HUD.init();
       Action.init();
 
-      //-- Init Events
-      $('#loader').hide();
     });;
   },
 
@@ -407,9 +426,7 @@ function animate(time) {
       Action.cursorSel.scale.set(scale, scale, scale);
 
     }
-      Action.cursorSel.rotation.y =  camera.rotation.y ;
-     // Action.cursorSel.quaternion.setFromEuler(camera.rotation.y );
-     //Action.cursorSel.quaternion.copy(camera.quaternion);
+    Action.cursorSel.rotation.y =  camera.rotation.y ;
   }