How to change a texture on a click of the button?

Help & Support
1

hi there i am creating a user interface where a person can change the texture of the model by clicking on the button or icon

var Ui = pc.createScript('ui');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

Ui.prototype.initialize = function () {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);
    
    this.counter = 0;
    
    this.bindEvents();
};

Ui.prototype.bindEvents = function() {
    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    var counter = this.div.querySelector('.counter');
    // if found
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            ++self.counter;
            if (counter)
                counter.textContent = self.counter;
            
            console.log('button clicked');

            // try to find object and change its material diffuse color
            // just for fun purposes
            var obj = pc.app.root.findByName('chamferbox');
            if (obj && obj.model && obj.model.model) {
                var material = obj.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(Math.random(), Math.random(), Math.random());
                    material.update();
                }
            }
        }, false);
    }

    if (counter)
        counter.textContent = self.counter;
};

this is what i found from html/css ui example how can i modify to get the result?

2

Hi @Aekantak_Vashistha,

Just to clarify, were you wanting to keep using the CSS/HTML style buttons to achieve your goal, or did you just want to be able to change texture on the click of a Playcanvas Button Entity?

3

yeah i am using html css button for which i have made my css and html ready not he playcanvas one, i just want the script to run with those buttons ?

i have my html ready with those button and css ready so should i put it in text editor and also the images on those buttons in assets library first?

4

Also its the almost the same as html/css ui example one but instead of one button i have three each should give it a different texture kiuke changing a sofa cover??

thanks for the reply though

5

Hi @Aekantak_Vashistha,

Without seeing the project, I can’t get very specific, but in general what would change inside the logic of your scripts is that instead of changing the material tint like in the example you would update the diffuse map itself. Using the example you posted as an example:

if (counter)
counter.textContent = self.counter;

        console.log('button clicked');

        // try to find object and change its material diffuse color
        // just for fun purposes
        var obj = pc.app.root.findByName('chamferbox');
        if (obj && obj.model && obj.model.model) {
            var material = obj.model.model.meshInstances[0].material;
            if (material) {
                material.diffuseMap = this.map.resource;
                material.update();
            }
        }
    }, false);

The above code assumes you’re passing a texture resource defined in a script attribute in your script, but I think you get the idea.

Also, for easier readability, please surround the code you paste into your posts with three backquotes like this :slightly_smiling_face:

2 Likes
6

thank you for replying ill link it up

https://playcanvas.com/editor/scene/1138908 have been making

this is the scene i