How could I know which button was clicked?

Questions
1

I had several 3d buttons in the scene, when I click one of them, I hope the clicked one changes its color to green. But the event onPointerClickObservable has no this parameter delivered to me. It has only position information. So how could I achieve this function. BTW, the buttons’ amount is huge, about 60.

2

Hi @Digital_Mimesis_Lab and welcome to the community

See https://playground.babylonjs.com/#XCPP9Y#15924

and

3

image
But this is not what I want, this bind button1 by manually typing the characters inside the callback function, this will be a lot of work if there are many buttons.

4

Then create a function to create one such button and call in a loop for the buttons needed.

1 Like
5

Hey @Digital_Mimesis_Lab @ViSim_Lab,
the second parameter in the callback has target.name property.
Eg.

button.onPointerUpObservable.add(function(position, event) {
    console.log(event.target.name)
});

So you can do as the @JohnK suggested - you can attach observable in a loop for each button and then get the name of the clicked button.

1 Like
6

Hi and welcome to the Community,
I can see the other answers above from my fellow BJS addicts which as always are great.
However I’m not sure they are relevant for your case.

If I read correctly, you are using the 3D GUI, yes? And you want to change the color of a button (a 3d button, a holo button?). Fact is the 3D GUI shares some materials within a same manager and a same container. So, may be your issue is that when you click on a button and change its color, all buttons inside this manager also change color, is it? If this is the case (a case I have faced before), you have two solutions. In some cases, you can call on a private property to change the _currentMaterial color. In other cases, the only solution I found so far was to attach each button to a new manager. I have recently posted about this, didn’t get any answers so far. May be I’ll give it another reminder or just be patient. Let me know if the above is a better description of your issue, in case I will try to help you find a workaround.
Meanwhile, have a great day and again, welcome to our extended family :sunglasses:

Edit: And then, for the rest of your question regarding the observable, you already have the answer above. Simply create a function for all/each button of a same type. You’ve been already given the code (most of) so it should be ez to implement, yes? Let us know if still stuck.

1 Like
7

Oh, do you have an example of this so I can take a look? :open_mouth:

8

I believe it only happens with the holo button.
Quickly did this test from the PG for the holo button in the doc.

Change button1 .alpha backMaterial and it changes all from this manager.

1 Like
9

Yeah, this is what I want exactly, and how to get the 3d button by its name? I only know how to find 2d button, but it seems not work on 3d button.

10

Here is the example with simple 3D button - https://playground.babylonjs.com/#HJZBRG#274

manager.rootContainer.children[0].children

will give you array of buttons.

4 Likes