Do remember to set Blendtype when setting element material!

Help & Support
1

I’ve been trying to dynamically load textures and turn them into materials and apply them to the elements these days. I’ve tried many ways to do this, even tried to create material assets to realize it, but it won’t work or appear in my element.

Until I compared the material I dynamically created with the material that can be displayed in the Element, I found:

image

image

It turned out to be a blend type mode problem! Uaaaaahhhhhhhhh!

Share my code here:

    // on initialize
    app.assets.loadFromUrl('[your texture URL here]', 'texture', function(err,asset){
        var entity = self.template.clone(); // [template] is the entity contains the element which I need to change image
        entity.enabled = true;
        var material = new pc.StandardMaterial();
        material.diffuseMap = asset.resource;
        material.emissiveMap = asset.resource;
        material.opacityMap = self.mask.resource; // a texture which used to be opacity mask
        material.blendType = pc.BLEND_PREMULTIPLIED; // HAVE TO SET BLENDTYPE HERE!!! Otherwise it won't show on screen!!!
        material.update();
        app.root.addChild(entity);
        entity.findByName("Avatar").element.material = material;
    });
4 Likes