gui color update sends property, colors and axis for grids

src/game-lib-color.js

@@ -63,7 +63,7 @@ GameLib.Color.prototype.createInstance = function() {
 /**
  * Updates the instance color, calls updateInstance on the parent object
  */
-GameLib.Color.prototype.updateInstance = function() {
+GameLib.Color.prototype.updateInstance = function(property) {
 
     this.instance.r = this.r;
     this.instance.g = this.g;
@@ -71,7 +71,7 @@ GameLib.Color.prototype.updateInstance = function() {
 
     if (this.parentObject &&
         this.parentObject.updateInstance) {
-        this.parentObject.updateInstance();
+        this.parentObject.updateInstance(property);
     }
 };
 

src/game-lib-d3-api-scene.js

@@ -9,6 +9,10 @@
  * @param images
  * @param fog
  * @param renderCamera - this is a camera which takes precedence over the renderer camera at time of render
+ * @param showGrid
+ * @param showAxis
+ * @param gridSize
+ * @param gridColor
  * @param parentEntity
  * @constructor
  */
@@ -22,6 +26,10 @@ GameLib.D3.API.Scene = function(
     images,
     fog,
     renderCamera,
+    showGrid,
+    showAxis,
+    gridSize,
+    gridColor,
     parentEntity
 ) {
 
@@ -70,6 +78,26 @@ GameLib.D3.API.Scene = function(
     }
     this.renderCamera = renderCamera;
 
+    if (GameLib.Utils.UndefinedOrNull(showGrid)) {
+        showGrid = true;
+    }
+    this.showGrid = showGrid;
+
+    if (GameLib.Utils.UndefinedOrNull(showAxis)) {
+        showAxis = true;
+    }
+    this.showAxis = showAxis;
+
+    if (GameLib.Utils.UndefinedOrNull(gridSize)) {
+        gridSize = 10;
+    }
+    this.gridSize = gridSize;
+
+    if (GameLib.Utils.UndefinedOrNull(gridColor)) {
+        gridColor = new GameLib.API.Color(0.1, 0.1, 0.1);
+    }
+    this.gridColor = gridColor;
+
     if (GameLib.Utils.UndefinedOrNull(parentEntity)) {
         parentEntity = null;
     }
@@ -163,6 +191,10 @@ GameLib.D3.API.Scene.FromObject = function(objectScene) {
         apiImages,
         objectScene.fog,
         objectScene.renderCamera,
+        objectScene.showGrid,
+        objectScene.showAxis,
+        objectScene.gridSize,
+        objectScene.gridColor,
         objectScene.parentEntity
     );
 

src/game-lib-d3-scene.js

@@ -31,6 +31,10 @@ GameLib.D3.Scene = function (
         apiScene.images,
         apiScene.fog,
         apiScene.renderCamera,
+        apiScene.showGrid,
+        apiScene.showAxis,
+        apiScene.gridSize,
+        apiScene.gridColor,
         apiScene.parentEntity
     );
 
@@ -139,6 +143,14 @@ GameLib.D3.Scene = function (
         )
     }
 
+    if (this.gridColor instanceof GameLib.API.Color) {
+        this.gridColor = new GameLib.Color(
+            this.graphics,
+            this.gridColor,
+            this
+        )
+    }
+
 	/**
      * Runtime scenes have helpers (just used to store which helper belongs to which scene)
 	 * @type {Array}
@@ -147,6 +159,10 @@ GameLib.D3.Scene = function (
 
 	this.clones = [];
 
+    this.grid = [];
+
+    this.axis = [];
+
 	this.storeClones = false;
 
     GameLib.Component.call(
@@ -218,6 +234,14 @@ GameLib.D3.Scene.prototype.createInstance = function() {
         }.bind(this)
     );
 
+    if (this.showGrid) {
+        this.drawGrid();
+    }
+
+    if (this.showAxis) {
+        this.drawAxis();
+    }
+
     GameLib.Component.prototype.createInstance.call(this);
 
 };
@@ -287,7 +311,28 @@ GameLib.D3.Scene.prototype.updateInstance = function(property) {
             }
 
         }.bind(this)
-    )
+    );
+    
+    if (
+        property === 'showGrid' ||
+        property === 'gridSize' ||
+        property === 'gridColor' 
+    ) {
+        if (this.showGrid) {
+            this.drawGrid();
+        } else {
+            this.removeGrid();
+        }
+    }
+
+    if (property === 'showAxis') {
+        if (this.showAxis) {
+            this.drawAxis();
+        } else {
+            this.removeAxis();
+        }
+        
+    }
 };
 
 /**
@@ -355,6 +400,10 @@ GameLib.D3.Scene.prototype.toApiObject = function() {
         apiImages,
         GameLib.Utils.IdOrNull(this.fog),
         GameLib.Utils.IdOrNull(this.renderCamera),
+        this.showGrid,
+        this.showAxis,
+        this.gridSize,
+        this.gridColor,
         GameLib.Utils.IdOrNull(this.parentEntity)
     );
 };
@@ -483,4 +532,113 @@ GameLib.D3.Scene.prototype.removeObject = function(object) {
     }
 
     // this.buildIdToObject();
-};
+};
+
+GameLib.D3.Scene.prototype.drawGrid = function() {
+
+    this.removeGrid();
+
+    var lineMaterial = new THREE.LineBasicMaterial({
+        color: this.gridColor.toHex(),
+        linewidth: 1
+    });
+
+    for (var y = -this.gridSize; y <= this.gridSize; y += 1) {
+
+        var Xgeometry = new THREE.Geometry();
+        Xgeometry.vertices.push(
+            new THREE.Vector3( y, 0, this.gridSize * -1 ),
+            new THREE.Vector3( y, 0, this.gridSize )
+        );
+
+        var lineX = new THREE.Line(Xgeometry, lineMaterial);
+
+        this.instance.add(lineX);
+
+        this.grid.push(lineX);
+
+        var Ygeometry = new THREE.Geometry();
+        Ygeometry.vertices.push(
+            new THREE.Vector3( this.gridSize * -1 , 0, y ),
+            new THREE.Vector3( this.gridSize, 0, y )
+        );
+
+        var lineY = new THREE.Line(Ygeometry, lineMaterial);
+
+        this.instance.add(lineY);
+
+        this.grid.push(lineY);
+    }
+};
+
+GameLib.D3.Scene.prototype.removeGrid = function() {
+    this.grid.map(
+        function(object) {
+            this.instance.remove(object);
+        }.bind(this)
+    );
+};
+
+GameLib.D3.Scene.prototype.drawAxis = function() {
+
+    this.removeAxis();
+
+    var Xmaterial = new THREE.LineBasicMaterial({
+        color: 0xff0000,
+        linewidth: 2
+    });
+
+    var Xgeometry = new THREE.Geometry();
+    Xgeometry.vertices.push(
+        new THREE.Vector3( 0, 0, 0 ),
+        new THREE.Vector3( 100, 0, 0 )
+    );
+
+    var lineX = new THREE.Line(Xgeometry, Xmaterial);
+
+    this.instance.add(lineX);
+
+    this.axis.push(lineX);
+
+    var Ymaterial = new THREE.LineBasicMaterial({
+        color: 0x00ff00,
+        linewidth: 2
+    });
+
+    var Ygeometry = new THREE.Geometry();
+    Ygeometry.vertices.push(
+        new THREE.Vector3( 0, 0, 0 ),
+        new THREE.Vector3( 0, 100, 0 )
+    );
+
+    var lineY = new THREE.Line(Ygeometry, Ymaterial);
+
+    this.instance.add(lineY);
+
+    this.axis.push(lineY);
+
+    var Zmaterial = new THREE.LineBasicMaterial({
+        color: 0x0000ff,
+        linewidth: 2
+    });
+
+    var Zgeometry = new THREE.Geometry();
+    Zgeometry.vertices.push(
+        new THREE.Vector3( 0, 0, 0 ),
+        new THREE.Vector3( 0, 0, 100 )
+    );
+
+    var lineZ = new THREE.Line(Zgeometry, Zmaterial);
+
+    this.instance.add(lineZ);
+
+    this.axis.push(lineZ);
+};
+
+GameLib.D3.Scene.prototype.removeAxis = function() {
+    this.axis.map(
+        function(object) {
+            this.instance.remove(object);
+        }.bind(this)
+    );
+};

src/game-lib-system-gui.js

@@ -583,7 +583,7 @@ GameLib.System.GUI.prototype.buildColorControl = function(folder, componentTempl
 			componentTemplate.affected.map(
 				function(component) {
 					component[property].fromHex(value);
-					component[property].updateInstance();
+					component[property].updateInstance(property);
 				}
 			)
 		}
@@ -597,7 +597,7 @@ GameLib.System.GUI.prototype.buildColorControl = function(folder, componentTempl
             componentTemplate.affected.map(
                 function(component) {
                     component[property].fromHex(value);
-                    component[property].updateInstance();
+                    component[property].updateInstance(property);
                 }
             )
         }