solved [SOLVED] Changing SubMaterial turns Mesh Invisible

[djeustice]

Hello.  My Kayak model has 4 sub materials on it.  I have a button called "KayakLime". I'd like this button to change sub material #2 from Peach.png to Lime.png when clicked.  Example #1 below works,  but it changes the 4 kayak sub materials all to Lime.png.

 var myKayak2;
        BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[0];       
        });

var LimeTexture = new BABYLON.StandardMaterial("Lime", scene);
    LimeTexture.diffuseTexture = new BABYLON.Texture("models/Lime.png", scene);
    LimeTexture.diffuseTexture.hasAlpha = false;
    LimeTexture.backFaceCulling = false;
    
 document.getElementById("KayakLime").addEventListener("click",function () {
            myKayak2.material = LimeTexture;  
        });

Example #2: I thought this click code below would change only sub material #2 to Lime.png.  However it turns the kayak invisible.  Do I need to add more properties in the LimeTexture material? Or is it something else I'm missing?

document.getElementById("KayakLime").addEventListener("click",function () {
            myKayak2.material.subMaterials[2] = LimeTexture;  
        }); 

[JCPalmer]

A texture is not a Material.  You need to make a material, say LimeMaterial, that has the diffuseTexture = LimeTexture.

Set the submaterials[2] = LimeMaterial;

[djeustice]

Thanks for replying. I changed my Lime Standard material to PBR material and it seems to be working now.  I think it was erroring because Kayak.gltf was looking for PBR properties:

    var myKayak2;
        BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[0];              
        }); 
    
    var LimeTexture = new BABYLON.PBRMaterial("Lime", scene);
    LimeTexture.albedoTexture = new BABYLON.Texture("models/Lime.png", scene);
    LimeTexture.baseColor = new BABYLON.Color3(1.000, 1.000, 1.000);
    LimeTexture.metallic = 0.0;
    LimeTexture.roughness = 1.0;
    LimeTexture.albedoTexture.hasAlpha = false;
    LimeTexture.backFaceCulling = false;
    
    document.getElementById("KayakLime").addEventListener("click",function () {
            myKayak2.material.subMaterials[2] = LimeTexture;  
        });