Using dat.GUI to increase the size of an object

[Brunex92]

I'm using dat.GUI as an interface for my application.

For now I'm basically using it to increase or decrease my drawed axis (x, y, z)

And following this tutorial http://www.pixelcodr.com/tutos/trees/trees.html I've managed my way to do it, but for some reason it only increases, everytime I try to decrease, it does nothing.

This is what I've done so far:
 

//showAxis.js

showAxis = function(scene){
	this.size = 10;
	this.displayAxisX = true;
	this.displayAxisY = true;
	this.displayAxisZ = true;
        this.generate(scene); //This makes the axis to show at start
};

showAxis.prototype.generate = function(scene){
	var axisX = BABYLON.Mesh.CreateLines("axisX", [
			BABYLON.Vector3.Zero(),
			new BABYLON.Vector3(this.size, 0, 0) ], scene);
	axisX.color = BABYLON.Color3.Red();

	var axisY = BABYLON.Mesh.CreateLines("axisY", [
			BABYLON.Vector3.Zero(),
			new BABYLON.Vector3(0, this.size, 0) ], scene);
	axisY.color = BABYLON.Color3.Green();

	var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
			BABYLON.Vector3.Zero(),
			new BABYLON.Vector3(0, 0, this.size) ], scene);
	axisZ.color = BABYLON.Color3.Blue();
};

//index.html part of it

var createScene = function() {
        //...

        var axis = new showAxis();
        initGui(axis);
}

var initGui = function(axis){
	var gui = new dat.GUI();
	gui.add(axis, 'size', 10, 1000).name("Axis size").step(10).onChange(function(){
		axis.generate(scene);
	});
}

As shown on codes, the size is set to start at 10, which is the minimum size for the axis, increasing it to a maximum of 1000, but trying to decrease, it'll do absolutely nothing.

My question is basically how do I make the size to decrease.


Thanks

[jerome]

Actually, you are creating new lines (so new objects) each time you change the GUI values and this new objects don't remove the former ones, they are just created in the same location but bigger if you increase the GUI values and smaller if you decrease them

So, I guess that the smaller lines are just displayed in the same location than the greater ones and you just can't see them

 

Instead of creating new objects (without disposing the older), I would either scale the existing one, either morph them : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines

[Brunex92]

Yeah right! I didn't notice that, thanks for the tip, I'll take a look

 

EDIT

Just managed how to do it, thanks for the tip

Edited May 25, 2016 by Brunex92