Update scene based on form inputs

[cclark440]

Thanks to the help from you guys I think I have a better understanding on how to render items.

My next challenge is to change the scene based on some form inputs.

When a user changes values in the inputs, I need to update the meshes in the scene based on the values in the inputs.

How do re-render the scene after the user changes values?

This seems like it should be pretty easy, but I have spent a day looking for an example.

 

Any help would be greatly appreciated.

 

[Pryme8]

what value are you trying to change?

domElement.addEventListener('change', (e)=>{
var t = e.target;
var v = t.value;
...do stuff...
}, false);

[cclark440]

I am trying to change the diameters and lengths of cylinders. 

The user specifies the diameters lengths of several cylinders that are relative to each other. Then the positions will change based on the values specified.

I currently have the cylinder values referencing the input values, but if the user changes the value in the form the rendering is not updating to reflect the new value.

I want the scene to update when that "L1" value is changed.

 

var createScene = function () {
//setup scene
var bodyLen = Number($("#L1").val());

var bodyDia = BABYLON.Mesh.CreateCylinder("bodyDia",bodyLen,11,11,32,scene,true);

//finish scene
}

 

[Pryme8]

push all your cylinders to an array, then on your inputs have an identifier that tells you what the cylinders index is, and do the onChange listener with a function like:

var cylinderID = parseInt(e.target.getAttribute('cID'), 10);
var value = parseFloat(e.target.value);
cylArray[cylinderID].dispose();
cylArray[cylinderID] = BABYLON.Mesh.CreateCylinder("bodyDia",value,11,11,32,scene,true);

 

[Pryme8]

also have you checked out babylon.GUI for the input elements?
it has onChange callbacks as well.

[Arte]

Hi @cclark440 and @Pryme8

Or like:

Create cylinder.....

var cylinder= BABYLON.MeshBuilder.CreateCylinder("Cylinder", {diameterTop:1, height: 1, tessellation: 48}, scene,true);

User values.......

var bodyL = Number($("#L1").val()); // Lengths

var bodyD = Number($("#D1").val()); // Diameter

Update cylinder.....

cylinder.scaling = new BABYLON.Vector3(bodyD, bodyL , bodyD);

Done.......

[cclark440]

Pryme8,

I had looked at the gui. I am still deciding what interface I want.

Pryme & Arte,

Since I am still new at all this, I guess I am still a little confused as to where the updating/recreating of the meshes will happen.

Will it happen in the createscene function?

I guess I need to do a little more reading and research to better understand the flow.

[Arte]

var createScene = function () {

              var cylinder= BABYLON.MeshBuilder.CreateCylinder("Cylinder", {diameterTop:1, height: 1, tessellation: 48}, scene,true);

}

var updateCylinder = function (bodyD,bodyL) {

             cylinder.scaling = new BABYLON.Vector3(bodyD, bodyL , bodyD);

}

 

on user changed parameters call updateCylinder 

[Pryme8]

With what you are doing I would use DOM elements (because the page will be loaded/run once), but if you end up developing on the playground the GUI will be better for you do to how DOM elements ans listeners are bound.

If I get a chance ill make a PG for you.

[cclark440]

My basic playground so far.

[Arte]

Looks good.

Which part you need to update?

[cclark440]

All of them

The other thing that I need to consider is that I want to tie this all to a "standards" database.

When the user inputs the values they want,, they will be checked against a database of standard values. This is why I have been leaning towards form driven inputs instead of GUI inputs.

 

[Pryme8]

 

9 minutes ago, cclark440 said:

When the user inputs the values they want,, they will be checked against a database of standard values. This is why I have been leaning towards form driven inputs instead of GUI inputs.

GUI can handle that aspect as well.  If you are doing it in a playground I would recommend GUI, if you are in control of the entire pages context (a standard html page that loaded the DOM context then attaches bindings) go with html elements.

[cclark440]

I will be in control of the entire page context.

I will work towards that. 

Thanks for all the help. I think I have enough to try again.

I will probably be back for more though. 

 

[Pryme8]

what I would do is bind on the entire context of the page a change listener so:

 

function updateDiameter(target, value){
...response...
}

document.addEventListener('change', (e)=>{
var t = e.target;
var cID = parseInt(t.getAttribute('cID'),10);
 switch(t){
     case 'diameter-in' :
              updateDiameter(cylArrary[cID], parseFloat(t.value));
     break;
}
}, false);

<input id='diameter-in' cID='0' type='number' value='1' step='0.1' />


so that way you dont have to do a million bindings.