[SOLVED] Material.update problem

I need some help, i’m loading a texture from web and i want to apply it on a new material (created from code or not), but i have the same error :

TypeError: material.update is not a function

the code:

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 = pc.app.assets.find("material_to_mod");
        material.diffuseMap = texture;
        material.update();
        
        setMaterial("obj_name",material);
        };
        image.src = "..img_path..";
function setMaterial(obj_name,materialAsset){
            pc.app.root.findByName(obj_name).model.meshInstances[0].material = materialAsset.resource;
} 

This should be

var material = pc.app.assets.find("material_to_mod").resource;

That’s because assets.find finds the pc.Asset - the actual resource in this case the material is stored in the resource property.

1 Like

In this type of errors I would suggest using console.log(var) to determine what exactly is it and does it implement required method (in your case)

Everything works now (creating new Material dynamically remains a mystery ),thanks for the answers!

1 Like

I had some difficulty making materials too. This may help.
UI refers to Phong material and Physical material. API uses the terms:

Don’t make things with the pc.material class. It appears to be a base class for the other two.
Use the standard material if you have doubts about where to start.

I can’t concur with that, it’s very strong point and right decision only for usual cases.

Oh. OK. I think my reply is misleading then. I will delete it. I am only trying to clarify things and Ive got it wrong.
So you’re saying the usual case is to use pc.material and not the other two ?

Oppositely, if you don’t need anything special, like custom shaders, just use standard materials.

SOLVED
hope to be helpful to someone else

Code: (without CORS)

        var image = new Image();
        /*image.crossOrigin = "anonymous";*/
        image.onload = function () {
        var texture = new pc.Texture(app.graphicsDevice);
        texture.setSource(image);

        var material = new pc.StandardMaterial();
        material.diffuseMap = texture; 
        material.update();         
        
        pc.app.root.findByName("target_entity").model.meshInstances[0].material=material;
            
        };
        image.src = "external/path/for/example.jpg"; // Remember CORS   
2 Likes

Don’t forget that you may have several meshes in the model. In this case you need to loop through the meshinstances like this:

blahblah.prototype.replace_material = function(node, mat) {
  var meshes = node.model.meshInstances;
  for (var i=0; i < meshes.length; i++) {
    meshes[i].material = mat;
  }
};

A post was split to a new topic: Swap texture of image element