[SOLVED] Trouble with attaching external texture to external glB

I am able load the glB-model in the following, but I do have issues with an external texture of which I want plaster the model (have tried with a couple of approaches - image.src was the first >> did not work):

var LoadGlbExternalFX = pc.createScript('loadGlbExternalFX');
LoadGlbExternalFX.attributes.add('url', {type: 'string'});
LoadGlbExternalFX.attributes.add('url_Texture', {type: 'string'});

// initialize code called once per entity
LoadGlbExternalFX.prototype.initialize = function() {

    var app = this.app;
    var self = this;
    var image = new Image();
     self.app.loader.getHandler("texture").crossOrigin = "anonymous";
        
    app.assets.loadFromUrl(self.url, 'model', function (err, asset) {
            self.entity.addComponent('model', {
                asset: asset
            }); 
        });
    app.assets.loadFromUrl(self.url_Texture, 'texture', function (err, asset) {

            image.src = self.url_Texture;
            var texture = new pc.Texture(self.app.graphicsDevice);   
            texture.setSource(image);
        
    var assetTex = new pc.Asset("myTexture", "texture", {
        url: self.url_Texture
    });
    
    self.app.assets.add(assetTex);
        
            var meshes = self.entity.model.model.meshInstances; 
            console.log("image.src: "+image.src.name); 
            var meshes1 = self.entity.model.meshInstances;
        
                          for(var i=0; i<meshes.length; i++){ 
                              var mesh = meshes[i];                              
                              //mesh.material.diffuseMap = texture;
                              mesh.material.diffuseMap = assetTex.resource; 
                              mesh.material.update();                            
                            }
                           for(var k=0; k<meshes1.length; k++){ 
                              var mesh1 = meshes1[k];     
                              mesh1.material.diffuseMap = assetTex.resource;     
                              mesh1.material.update();                        
                            }
        });
};

PS: I am also trying to get wiser through @will’s engine-update post:

The examples from the engine (see http://playcanvas.github.io/) are your best bet here on how to load external assets.

GLB containers: http://playcanvas.github.io/#loaders/loader-glb.html
Texture: http://playcanvas.github.io/#graphics/model-textured-box.html

Ok, but those are still two different load-setup (they should not wait for each other). I am wondering if it can be an advantage to split the code by a time delay (in case the 3d object is heavier, the texture resource might load quicker and at that point the material-part of the code might be too fast)?

You can start the load for both at the same time and in the callback, call a function that checks if all resources are ready before putting the two together.

Ok, not all into all coding terms perse … when saying ‘callback’ you mean at the ‘return’ of an OPP-function? :slight_smile:

https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl

Please read the information about the params.

Here’s an example of doing multiple asset loads at the same time and waiting before they are all loaded before doing something https://playcanvas.com/editor/code/439131?tabs=5706576

Well, you should. Callback means callback.

Instead of coming up with new terms in your posts, or using “quoted exspressions” when you don’t know the proper term or meaning, you need to know the topic you are talking about in the first place. You should stop doing whatever you are doing there and start learning Javascript. From the beginning - how to create variables, pass arguments to functions, create classes, etc. There are no shortcuts - everyone goes through this. Learning is a normal and the only path. Forum is here for the exact same reason. Jumping right into middle of it will make you more harm than good.

I dont like your tone … I am trying to work in here on a professional level:

  1. I pay for the organization membership.
  2. Have plus 20 projects within my PC-library, that uses up more than 5 GB.

Having 20 years of experience on a extreme wide range of technologies, I work by the philosophy that people have different qualifications. If I have challenges on certain areas, I rely on the service deal that lays within my (already) 2 years steadily payed membership at Playcanvas.

I like the respectful tone and service from the PlayCanvas Team - and I think I can rely on them in the future. Disrespect and trolling should be found elsewhere + you do have the option of improving attitude and/or deleting such posts.

I see. I appologize for barging in the topic, where you were looking for support from the Playcanvas Team. I will be more considerate in the future. Don’t mind me.

1 Like

I appreciate the response. Let us all move forward.

My opinion (targeted users at large): There should not be a correct sheet in relation; to how, one user is learning Javascript.

  • At PlayCanvas Team: In case you disagree; please make resources that optimizes the combined knowledge of essential technologies and/or make a “Study flow hub”-siteresource that eases forum discussions (for instance; “For learning basic Javascript we recommend x.com. For AJAX visit y.net. For PHP/MySQL visit … For further details on supporting JS-libraries visit w.org for jQuery … for details on Vanilla JS; q.biz … Other techs; XML , … JSON … etc”).
    But I have already written with @YauStar on such improvements, and it is (naturally) an ongoing development with no deadlines - no sweat.

Short ending: works finally. Conclusion; while comparing ordinary FBX load to extrernal glB load:
glB is much more vunerable to non-uvwrap’ed objects.

At edit-state with marked vertices: Make sure to uvwrap your model and attach image by node editor - then save image + export. The 3D glB-format object can now have its material appear in PC plus have it changed.