Changing materials on different render meshes with diffuse images and lightmaps

Help & Support
1

Changing materials on different render meshes with diffuse images and lightmaps

Hello,

I’m currently working on a project where I need to change materials on different render meshes. Each render mesh has its own set of properties, including diffuse images and lightmaps. However, I’m facing some difficulties in achieving the desired outcome, and I would greatly appreciate your assistance and guidance.

Specifically, when I click to change the render mesh, I also want to update its material to reflect the corresponding diffuse image and lightmap. I have already tried a few approaches, but I haven’t been successful so far.
here is my project plz go through it
https://playcanvas.com/editor/scene/1794152
thanks

image
image1574×714 146 KB

as you can see when i click to change model varient the material of varients will apply

2

Can you describe what code gets executed when you click that button? How do you change that material? A code snippet is enough. It is hard to say without spending time on investigating your project and browsing your files. And time is always short.

1 Like
3

ok I have now done like this and it is working somehow. now the issue is if i am creating inserting shelf 3 or shelf 4 materials the last mesh material do not switching.

image
image330×924 54.2 KB

image

HtmlHandler.attributes.add(“shelf1”, { type: “asset”, assetType: “material”, array: true, title: “shelf1” });

HtmlHandler.attributes.add(“shelf2”, { type: “asset”, assetType: “material”, array: true, title: “shelf2” });

HtmlHandler.attributes.add(“shelf3”, { type: “asset”, assetType: “material”, array: true, title: “shelf3” });

let currentVariant = “shelf1”;

var buttons = document.querySelectorAll('.custom-button');
buttons.forEach(function (button, i) {
    button.addEventListener('click', function (e) {
        var obj = pc.app.root.findByName('box');
        if (obj && obj.render) {
            var meshInstance = obj.render.meshInstances[0];
            if (meshInstance && meshInstance.material) {
                var variantMaterials = currentVariant === 'shelf1' ? self.shelf1 : self.shelf2;
                meshInstance.material = variantMaterials[i].resource;
                meshInstance.material.update();

                document.querySelectorAll('.custom-button').forEach((item) => {
                    item.classList.remove("active")
                });
                button.classList.add("active");
            }
        }
    });
});


var buttons = document.querySelectorAll('.v1');
// if found

buttons.forEach(function (button, i) {
    button.addEventListener('click', function (e) {
        var obj = pc.app.root.findByName('box');

        if (obj && obj.render) {

            console.log(button.getAttribute("id"))
            currentVariant = button.getAttribute("id");

            if (self['abc'[i]] && self['abc'[i]].resource) {
                obj.render.asset = self['abc'[i]].id;
                obj.render.asset;

                let activeMaterialIndex = -1;
                document.querySelectorAll('.custom-button').forEach((item, i) => {
                    if(item.classList.contains("active")){
                        activeMaterialIndex = i;
                    }
                });

                var meshInstance = obj.render.meshInstances[0];
                if (meshInstance && meshInstance.material) {
                    var variantMaterials = currentVariant === 'shelf1' ? self.shelf1 : self.shelf2;
                    meshInstance.material = variantMaterials[activeMaterialIndex].resource;
                    meshInstance.material.update();
                }
            }
        }

    });
});
4

let me explain in


a video so that you can understand easily:

5

You should not use ChatGPT, as it often generates incorrect code.

Your code doesn’t seem to use mesh 3 or 4 anywhere. The best approach for you would be first to understand what each line of your code is doing. Copy-paste will never work properly.

6

these are my meshes and their is index.html file which have only have class and id attribute in the button.

and you are 100% right i am trying to learning the script but the i have to complete the project some reason.