Input Text control linked to mesh

Questions
1

Apologies in advance, this is probably a really simply one but I’m struggling to get the input from a text box to drive a mesh parameter. Simple repo example linked below.

https://playground.babylonjs.com/#A9MWZ9

In this instance how do I get changes to the text box to change the sphere diameter. I’ve tried using the direct output from the text box and also parsing the string but neither seems to work. I’m sure this is something really obvious but I can’t figure it out.

Thanks,
Sy

2

Take a look at this: https://playground.babylonjs.com/#A9MWZ9#1

Note that only the registerBeforeRender lambda is called every tick.

scene.registerBeforeRender(function () {
    if (heightInput.text != lastText) {
        let scale = parseInt(heightInput.text)*0.1;
        sphere.scaling = new BABYLON.Vector3(scale, scale, scale);
    }
});
1 Like
3

You could also rely on the text changed observable to prevent extra work in the main loop:

https://playground.babylonjs.com/#A9MWZ9#2

1 Like
4

Thanks for both of these. I understand the principle but observing the behaviour I am not sure that will work as I want.

Essentially I am trying to put together a small app that will work as a visualiser for wall panelling. Users will input wall width and height and then number of vertical and horizontal panels.

I’ve set up a further repo below which works as intended if the variables are updated in the code window (Lines 6-11) with the aim now of the text inputs updating these variables.

https://playground.babylonjs.com/#NU02IX#9

A few things to note: The text inputs are in millimetres but if I try to render the scene in that scale there is a lot of visual clipping. As such the inputs for width and height will need dividing by 1000. Secondly. I’m not sure if the instance approach for creating the horizontal and vertical slats will work in this regard. If the user wanted less of these it will effectively need to remove meshes. The scene almost needs to redraw itself from scratch each time. This would also allow the variables to directly control the starting width and height of the mesh elements rather than having to work out a scaling based on its current size which seems messy.

Thoughts?

5

@msDestiny14 might help with the GUI part, but here it is not Babylon related necessarily but more about how you want to create your app.

1 Like
6

An observable on the GUI text input elements is exactly what you’re going to want:

onTextChangedObservable or the one you currently have onBeforeKeyAddObservable. And then just recalculate when they are called. One suggestion if you want to cut down on the amount of renders is to only calculate once the enter key is pressed or if the element loses focus. That way you know that the input is done and wont be changing.

Can also play with alpha values or mesh enable/disable. Or move way off screen. That way you are no removing/adding meshes each time because they are already loaded in.

1 Like