Update the diffuse image and retain all the original material settings

The code below works well. It loads a new image by creating a new material and assigns it to the mesh.
However, by creating a new material all of my settings are lost (Glossiness).
How would I edit the code below to just update the diffuse image and retain all the original material settings?

Thank you.

// initialize code called once per entity
Load.prototype.initialize = function() {
var self = this;
var image = new Image();
image.crossOrigin = "anonymous";
image.onload = function () {
    var texture = new pc.Texture(self.app.graphicsDevice);
    texture.setSource(image);

    var material = new pc.StandardMaterial();
    material.diffuseMap = texture; 
    material.update();         

    pc.app.root.findByName(myProduct).model.meshInstances[myMeshNumber].material = material;
};

myLoad = function(myImage){
    image.src = myURL + myFolder + myImageFolder + myImage;
};
};

I thought this might be correct but it’s not.

image.onload = function () {
    var texture = new pc.Texture(self.app.graphicsDevice);
    texture.setSource(image);     

    mesh = pc.app.root.findByName(myProduct).model.meshInstances[myMeshNumber];
    mesh.material.diffuseMap = texture;
    mesh.material.update();
};

My bad! This works.

mesh = pc.app.root.findByName(myProduct).model.meshInstances[myMeshNumber];
mesh.material.specularMap = texture;
mesh.material.update();

Just incase anybody cares :slight_smile: my mistake was with my model not the code.

1 Like

Excuse me, your replay confused me.
You said you want to change diffuseMap, but you assigned the texture to specularMap at the end.
Why?
Could you show me your project for learn? Thanks.

Hi Charles, I can see why this would confuse you :slight_smile: I was just learning! I have not used PlayCanvas for a while but the code below might help you. I think this is what I used in the end.

// image is the URL to your image
// myProduct is the name of the entity (chair)
image
//myMeshNumber is the mesh instance (0 or 1 or 2)
image

 // Diffuse Texture
    var texture = new pc.Texture(self.app.graphicsDevice);
    texture.setSource(image); // image is the URL to your image                       
    mesh = pc.app.root.findByName(myProduct).model.meshInstances[myMeshNumber];
    mesh.material.diffuseMap = texture;
    
           
    // Update Material
    mesh.material.update();

I hope this helps!

Understood, thanks a lot.