Texture change on button click

Questions
, ,
1

Hi i want to change the texture of the model when i click on the particular button and thr texture of that model gets change. there are two texture i want to change the texture of the model between two button.

2

This is quite popular question, and here is my usual example - Mu-so 2nd Generation 3D

Button

<div class="topgui grileGray" onclick="makeBlack()" title="makeBlack"></div>

The Function

 this.makeBlack = function() {
        var grile = scene.getMaterialByName("Grile-black");
        var textureblack = new BABYLON.Texture("textures/F-grile-grey.jpg", scene);
            grile.albedoTexture = textureblack;

        console.log ("grile.albedoTexture.name = " + grile.albedoTexture.name);
            }

Hope it will help to use it according to your needs.

1 Like
3

I tried this but the texture does not gets changed and the log that i am getting is correct

4

Hi, There’s an error in the code. Whilst learning, you should probably have the console open to check your script (my advise only).

debug-material
debug-material1644×1044 249 KB

Here you did assign a ‘property’ of a material as if it was the material itself.
Where ‘hero.material’ is THE MATERIAL and 'needAlphaBlending is a property of a material.
So by saying that the material of mesh ‘hero’ is equal to ‘needAlphaBlending’ is incorrect and throws this error.
In general (my advise), it would be best to create a material and set all properties at material level (as opposed to what you are mostly doing == calling the mesh.material to change material properties).

Here’s a modified version of your PG (line 141). The instruction is now correct and doesn’t throw an error. Yet, I am not too sure what it is supposed to do in this case (nothing if you ask me :wink:

Don’t give up. Continue your learning, read the doc and may be watch some videos (some are very good, I had a great time watching these). Keep the console open to check your script.

5

Thanks I solved the problem