Change element colour on and off on click

My aim is to make the elements in this playground change to the greenMat colour on click and then to revert to the original material on another click of the element. At the moment they change colour if you click and click off. Elements disappear if clicked twice at the moment which I don’t want. Any help is much appreciated.

I’ve disabled the ground so it can’t change colour.

https://www.babylonjs-playground.com/#YIU90M#42

There were several issues on your algorithm (like line 51 where you were assigning a material on a color property :slight_smile: ).

Anyway, here my tests: https://www.babylonjs-playground.com/#YIU90M#46

2 Likes

Cheers Vinc3r the Jedi master.
Much closer to what I’me after.

I’ve dabbled with your code to make each element turn green on click. I now need each element to revert back to the original material on clicking again.

https://www.babylonjs-playground.com/#YIU90M#49

Thanks for the help

Sorry, I’ve got a bit stuck. Do you know how to click a mesh so it changes colour and if clicked again it returns to the original material created in Blender. Or would I have to originally assign a colour material through Babylon? Or maybe it’s better to add and remove an overlay.

https://www.babylonjs-playground.com/#YIU90M#88

Just store the mesh.material property value to a temp variable and restore if mesh.material === greenMaterial

1 Like

Thank you @Deltakosh
Sorry, I’m still struggling with this, here is where I am at the moment:
https://www.babylonjs-playground.com/#YIU90M#103

I removed your isSelected just to keep it simple…
Your main mistake was to use meshes.material instead of evt.pickInfo.pickedMesh

https://www.babylonjs-playground.com/#YIU90M#105

But I don’t know why the rendering of the light changes a bit when you re-asign the redMaterial :thinking:

1 Like

Fantastic, thanks again for your help @wulf11
The light change seems like a strange one, when I removed the 2 lights the problem still existed. I don’t know if there’s a way in the code to say ‘return to previous material’ rather than assigning it to a specific material.
There’s an error in the console when clicking off an object, Cannot read property ‘material’ of null. I don’t know if this is a problem.
The next step is to add a couple of extra materials, when clicked to green and clicked again they return to the original material.

no problem :smiley:
@Deltakosh was allready pointing you in the right direction! But I know how it feels when you’re stuck :sweat_smile: Hmm still don’t know why the light behaves this strange…maybe someone else can give us a hint!

For the null error, try to enclose your code with:
if(evt.pickInfo.pickedMesh){

This will check, if you have a mesh under your mousePointer! If not, you try to assign materials to a null object which results in errors. :nerd_face:

1 Like

Material.001 and Material.004 are PBRMaterial while greenMat is a Standard one, that’s why lighting looks different.

2 Likes

Thanks @Vinc3r, sounds like I need to read up on PBTMaterials.

One thing though, the initial red when the page loads (Material.001 and Material.004) look different to the red after the object is clicked back from green to red. Could it be because Material.001 becomes a standard material on click and when clicked back to the PBRMaterial it has kept some of the properties?

Sorry @wulf11, I thought I did as you suggested but the click to green stopped working. I did notice though when wrapping everything from above the variables with:
if(evt.pickInfo.pickedMesh){
then it affected the red colour

https://www.babylonjs-playground.com/#YIU90M#106

almost!
Try it like this: :wink:

https://www.babylonjs-playground.com/#YIU90M#107

2 Likes

Excellent! Thanks

If I remove the car scaling then the red material on load looks the same as the red material after clicking from green. The green material seems to reflect more light so I’ll read up on the materials.
Thank you all for your super help, much appreciated.

1 Like