Improve distant view + fix on galaxy scale

- add a 2D background Milky Way image on far view - fix on galaxy scale - testing new labels for distant view
gbiobob · Jan 23, 2016 · a44c94c · a44c94c
1 parent e22e28b
commit a44c94c
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 11 deletions.
diff --git a/js/components/action.class.js b/js/components/action.class.js
@@ -439,9 +439,9 @@ var Action = {
     var posY = Math.floor(goY);
     var posZ = Math.floor(goZ/1000)*1000;
 
-    Ed3d.grid1H.obj.position.set(posX, posY, posZ);
-    Ed3d.grid1K.obj.position.set(posX, posY, posZ);
-    Ed3d.grid1XL.obj.position.set(posX, posY, posZ);
+    if(!Ed3d.grid1H.fixed) Ed3d.grid1H.obj.position.set(posX, posY, posZ);
+    if(!Ed3d.grid1H.fixed) Ed3d.grid1K.obj.position.set(posX, posY, posZ);
+    if(!Ed3d.grid1H.fixed) Ed3d.grid1XL.obj.position.set(posX, posY, posZ);
 
   }
 

diff --git a/js/components/galaxy.class.js b/js/components/galaxy.class.js
@@ -4,6 +4,7 @@ var Galaxy = {
 
   'obj' : null,
   'milkyway' : [],
+  'milkyway2D' : null,
   'colors' : [],
 
   'x' : 25,
@@ -26,6 +27,7 @@ var Galaxy = {
     this.obj.add(sprite); /// this centers the glow at the mesh
 
     this.createParticles();
+    this.add2DPlane();
 
 
   },
@@ -50,9 +52,94 @@ var Galaxy = {
       Ed3d.showScene();
 
     };
-    // load img source
+
+    //-- load img source
     img.src = Ed3d.basePath + "textures/heightmap7.jpg";
 
+    //-- Add optional infos
+    if(Ed3d.showGalaxyInfos) this.showGalaxyInfos();
+
+  },
+
+  /**
+   * Add 2D image plane
+   */
+
+  'showGalaxyInfos' : function() {
+
+    this.addText('The Orion Spur',10,0,0,0);
+    this.addText('Galactic Core Region',this.x,this.y,-this.z,0);
+    this.addText('The outer arm vacuus',10,0,14500,0);
+
+    this.addText('The Carina-Sagittarius arm',35000,0,-18000,90);
+
+  },
+
+  /**
+   * Add 2D image plane
+   */
+
+  'add2DPlane' : function() {
+
+    var texloader = new THREE.TextureLoader();
+
+    //-- Load textures
+    var back2D = texloader.load(Ed3d.basePath + "textures/heightmap7.jpg");
+
+
+    var floorMaterial = new THREE.MeshBasicMaterial( {
+      map: back2D,
+      transparent: true,
+      opacity: 0.4,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+      side: THREE.DoubleSide
+    } );
+
+    var floorGeometry = new THREE.PlaneGeometry(104000, 104000, 1, 1);
+    this.milkyway2D = new THREE.Mesh(floorGeometry, floorMaterial);
+    this.milkyway2D.position.set(this.x, this.y, -this.z);
+    this.milkyway2D.rotation.x = -Math.PI / 2;
+    scene.add(this.milkyway2D);
+
+  },
+
+  /**
+   * Add Shape text
+   */
+
+  'addText' : function(textShow, x, y, z, rot) {
+
+    var size = 600;
+    textShow = textShow.toUpperCase();
+
+    var textShapes = THREE.FontUtils.generateShapes(textShow, {
+      'font': 'helvetiker',
+      'weight': 'normal',
+      'style': 'normal',
+      'size': size,
+      'curveSegments': 100
+    });
+
+    var textGeo = new THREE.ShapeGeometry(textShapes);
+
+      var textMesh = new THREE.Mesh(textGeo, new THREE.MeshBasicMaterial({
+        color: 0xffffff,
+      blending: THREE.AdditiveBlending
+      }));
+
+    textMesh.geometry = textGeo;
+    textMesh.geometry.needsUpdate = true;
+
+    x -= Math.round(textShow.length*400/2);
+
+    if(rot != 0) textMesh.rotation.z = Math.PI * (rot) / 180;
+    textMesh.position.set(x, -1000, z);
+    textMesh.rotation.x = -Math.PI / 2;
+
+
+    scene.add(textMesh);
+
 
   },
 
@@ -88,7 +175,8 @@ var Galaxy = {
     var nb = 0;
     var maxDensity = 15;
 
-    var scaleImg = 16.4;
+    //var scaleImg = 16.4;
+    var scaleImg = 19.6;
 
     var colorsBig = [];
     var nbBig = 0;

diff --git a/js/components/grid.class.js b/js/components/grid.class.js
@@ -13,6 +13,8 @@ var Grid = {
 
   'visible' : true,
 
+  'fixed' : false,
+
   /**
    * Create 2 base grid scaled on Elite: Dangerous grid
    */
@@ -29,6 +31,44 @@ var Grid = {
 
     this.obj.customUpdateCallback = this.addCoords;
 
+
+    return this;
+  },
+
+  /**
+   * Create 2 base grid scaled on Elite: Dangerous grid
+   */
+
+  'Infos' : function(step, color, minDistView) {
+
+    var size = 50000;
+    if(step== undefined) step = 10000;
+    this.fixed = true;
+
+    var geometry = new THREE.Geometry();
+    var material = new THREE.LineBasicMaterial( {
+      color: 0x555555,
+      transparent: true,
+      opacity: 0.2,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false
+    } );
+
+    for ( var i = - size; i <= size; i += step ) {
+
+        geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
+        geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
+
+        geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
+        geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
+
+    }
+
+    this.obj = new THREE.Line( geometry, material, THREE.LinePieces );
+    this.obj.position.set(0,0,-20000);
+
+    scene.add(this.obj);
+
     return this;
   },
 

diff --git a/js/components/hud.class.js b/js/components/hud.class.js
@@ -67,6 +67,7 @@ var HUD = {
         var state = Galaxy.milkyway[0].visible;
         Galaxy.milkyway[0].visible = !state;
         Galaxy.milkyway[1].visible = !state;
+        Galaxy.milkyway2D.visible  = !state;
         $(this).toggleClass('active');
       })
       .appendTo( "#options" );

diff --git a/js/ed3dmap.js b/js/ed3dmap.js
@@ -77,9 +77,7 @@ var Ed3d = {
 
   },
   'colors'  : [],
-  'textures' : {
-
-  },
+  'textures' : {},
 
   //-- HUD
   'withHudPanel' : false,
@@ -106,6 +104,9 @@ var Ed3d = {
   //-- Active 2D top view
   'isTopView' : false,
 
+  //-- Show galaxy infos
+  'showGalaxyInfos' : false,
+
   /**
    * Init Ed3d map
    *
@@ -123,7 +124,8 @@ var Ed3d = {
         hudMultipleSelect: Ed3d.hudMultipleSelect,
         effectScaleSystem: Ed3d.effectScaleSystem,
         startAnim: Ed3d.startAnim,
-        playerPos: Ed3d.playerPos
+        playerPos: Ed3d.playerPos,
+        showGalaxyInfos: false
     }, options);
 
     $('#loader').show();
@@ -138,6 +140,7 @@ var Ed3d = {
     this.startAnim         = options.startAnim;
     this.effectScaleSystem = options.effectScaleSystem;
     this.playerPos         = options.playerPos;
+    this.showGalaxyInfos   = options.showGalaxyInfos;
 
     //-- Init 3D map container
     $('#'+Ed3d.container).append('<div id="ed3dmap"></div>');
@@ -209,7 +212,7 @@ var Ed3d = {
 
       Ed3d.grid1H  = $.extend({}, Grid.init(100, 0x111E23, 0), {});
       Ed3d.grid1K  = $.extend({}, Grid.init(1000, 0x22323A, 1000), {});
-      Ed3d.grid1XL = $.extend({}, Grid.init(10000, 0x22323A, 10000), {});
+      Ed3d.grid1XL = $.extend({}, Grid.Infos(10000, 0x22323A, 10000), {});
 
 
       // Add some scene enhancement
@@ -225,6 +228,12 @@ var Ed3d = {
       if(this.jsonPath != null) Ed3d.loadDatasFromFile();
       else if(this.jsonContainer != null) Ed3d.loadDatasFromContainer();
 
+
+      if(!this.startAnim) {
+        Ed3d.grid1XL.hide();
+        Galaxy.milkyway2D.visible = false;
+      }
+
       // Animate
       animate();
 
@@ -566,11 +575,15 @@ function enableFarView (scale, withAnim) {
     Galaxy.milkyway[1].material.size = scaleTo*4;
   }
 
+  //-- Enable 2D galaxy
+  Galaxy.milkyway2D.visible = true;
+
 
   //Galaxy.obj.scale.set(20,20,20);
   if(Action.cursorSel != null)  Action.cursorSel.scale.set(60,60,60);
   Ed3d.grid1H.hide();
   Ed3d.grid1K.hide();
+  Ed3d.grid1XL.show();
   Ed3d.starfield.visible = false;
   scene.fog.density = 0.000009;
 
@@ -606,6 +619,8 @@ function disableFarView(scale, withAnim) {
     Galaxy.milkyway[1].material.size = scaleTo;
   }
 
+  //-- Disable 2D galaxy
+  Galaxy.milkyway2D.visible = false;
 
   //-- Show element
   Galaxy.milkyway[0].material.size = 16;
@@ -614,6 +629,7 @@ function disableFarView(scale, withAnim) {
   if(Action.cursorSel != null)  Action.cursorSel.scale.set(1,1,1);
   Ed3d.grid1H.show();
   Ed3d.grid1K.show();
+  Ed3d.grid1XL.hide();
   Ed3d.starfield.visible = true;
   scene.fog.density = Ed3d.fogDensity;
 }

diff --git a/js/ed3dmap.min.js b/js/ed3dmap.min.js