Make components from for loop visible and invisible

Hi everyone,

I’m making a greenhouse with a heatmap for the temperature. I’m at the starting phase. I want to make the green rows (“rijen” in dutch) invisible and visible by clicking on the button. But the rows are created in a for loop because the number of rows are variable and by the for loop the rows are perfectly created. The rows are seperately created for the left and right side.

https://playground.babylonjs.com/#0TM95Q#7

1 Like

As far as I understand your problem you may solve it at material level with something like

scene.getMaterialByName("groen").disableColorWrite = true;
scene.getMaterialByName("groen").disableDepthWrite = true;

If this effect is the desired one, there is no problem to put it to the GUI button. Let me know if you’ll need help with that.

1 Like

Hey there. One issue is that the top row of green meshes is created in the button handler, so an extra top row of meshes is created on every other button click.

An easy way to fix that is to move the for loop that creates that top row up out of the button handler and make each of the green meshes a child of a transform node container, then just set the container to enabled or disabled to show and hide them when the button is clicked. :slightly_smiling_face:

https://playground.babylonjs.com/#0TM95Q#11

4 Likes

Definitely keep us posted on this, I can’t wait to see what you build!

2 Likes

Thanks Blake, I totally forgot the parent option. I’ve got a second question about the for loop. In the real document I want to let the user change the lengths and the widths of the rows by themselves through for example an inputfield. Is there a possebility to change the values of the rows by the inputfield, I made for example an inputfield for the length of the left rows, named the “inputLRLinks” because LRLinks is the value for the length of the left rows.

https://playground.babylonjs.com/#0TM95Q#13

1 Like

I’m not so sure what you’re after here, but to use the InputText to control the amount of green meshes visible on the top row, for example, you can loop over the meshes and set them each to enabled or disabled like below. :slightly_smiling_face:
https://playground.babylonjs.com/#0TM95Q#14

Edit: Or I think you mean changing the mesh width instead maybe? Here’s a quick example of using scaling.x to set the width of each of the green meshes. The input value is a percent of the original value, so 50 will make them half as wide, for example. :slightly_smiling_face:
https://playground.babylonjs.com/#0TM95Q#16

1 Like

Hi,

The reaction solved a part of the problem. Because when I change the widths and the lengths of the rows. The other parts of the environment must move with them. So for example: I change the width of the rows (called “rijen” in dutch), the walking paths (“looppaden” in dutch) must move with them. How can I solve that?

1 Like

If you want to change the size of multiple different meshes in the same proportion, you can apply the same scaling change to all of them. In this example, every time the button is clicked I reduce the x scaling of both meshes by half, so they keep the same proportion: Apply scale | Babylon.js Playground (babylonjs.com)

But does that work also in my case because when my starting rowwidthvalue is 2 and I multiply it in the environment the other objects like the walls, the walkingpaths and other components in the environment. Is there not an option to say something like:
InputLRLinks.onTextChangedObservable.add(function() {
const scale = parseInt(InputLRLinks.text);
LRLinks = scale;
});
And when I put “30” in the inputblock. The length of the rows change to 30. The walking paths moves with the rows and the walls at the sides gets another length etcetera. And after it’s changed I want to make it “5” etc.

Because at the end of the project the lengths, widths, heights etc from all the components comes from a database and must be picked up and be changed by an inputblock.

Can you provide us with a simpler playground example so we can work through your requirements? Maybe something with less blocks.

https://playground.babylonjs.com/#KH35HV#1

Would be awesome if you can help, I translate the most thing to english to make it simplier

1 Like

One way to scale everything at once is to put everything that you want scaled into another TransformNode container and then just scale that one container.

I also changed parseInt to parseFloat so that the x scaling value can be entered directly, moved the button to show the rows so that it can be seen and clicked, and centered everything on screen to see better what’s going on. :slight_smile:
https://playground.babylonjs.com/#KH35HV#5

3 Likes