How to change .glb model on click of button? AWS

Help & Support
, ,
1

I have 3D .glb files of 3 masks. I want to change the masks whenever the user clicks the UI button for the designated masks. The masks are hosted on was, I want to replace the models based on button clicks. The mask model should be the child of the parent_entity . This is a prototype there can be more than 3 models in the future hence the need to host the models on AWS. Any help is appreciated.
The child model is a Legacy 3D model.

This is my UI button code.

Ui.prototype.bindEvents = function () {
    var self = this;
    var entity = this.app.root.findByName("parent_entity")

    var assetBaseUrl = "https://ss-ar-test.s3.ap-south-1.amazonaws.com/";
    // example
    //
    // get button element by class
    var button = this.div.querySelectorAll('.button');

    // if found
    button.forEach((ele) => {
        if (ele) {
            // add event listener on `click`
            ele.addEventListener('click', function () {
                ele.style.backgroundColor = ele.id

                var modelUrl = assetBaseUrl + 'onimask_' + ele.id + '.glb';
                // console.log('button clicked', modelUrl, entity)

            }, false);
        }
    })

};
2

here is a sample code to load glb and add as a child, though you probably need to remove current child before adding new child mesh

// prepare asset
var asset = new pc.Asset(modelUrl, 'container', {url: modelUrl});
asset.once('load', function(rs) {
  let mesh = rs.resource.instantiateRenderEntity();
  entity.addChild(mesh); // add as a child to "parent_entity"
});
app.assets.add(asset);
app.assets.load(asset); // load the asset
3

Hello @battal thanks for your reply. I tried the code and I got the following error:
image

app.assets.add(asset); for this line

4

add “this” or “pc” prefix to app: this.app.assets or pc.app.assets

5

@battal The models are smaller than needed how do I set scale and position? OR best is it possible to just replace the legacy model and keep its transformations as it was set in the editor?

6

This is my solution:

Ui.prototype.bindEvents = function () {
    var self = this;
    var entity = this.app.root.findByName("Face Mask Full Head Model")
    var maskModel = this.app.root.findByName("mask")
    var assetBaseUrl = "https://amazonaws.com/";
    // example
    //
    // get button element by class
    var button = this.div.querySelectorAll('.button');

    button.forEach((ele) => {
        if (ele) {
            // add event listener on `click`
            ele.addEventListener('click', function () {
                ele.style.backgroundColor = ele.id

                var modelUrl = assetBaseUrl + 'onimask_' + ele.id + '.glb';
                // create a unique id
                var filename = 'onimask_' + ele.id + '.glb';
                // prepare asset
                var asset = new pc.Asset(modelUrl, 'container', { url: modelUrl, filename: filename });
               // set asset id
                asset.name = filename

                asset.once('load', function (rs) {
                    // find the child entity and set asset 
                    const modelAsset = pc.app.assets.find(filename, 'model');
                    maskModel.model.asset = modelAsset;
                });
                pc.app.assets.add(asset);
                pc.app.assets.load(asset); // load the asset

            }, false);
        }
    })

};

One question here would be when to use this.app and pc.app this.app did not work for me.