[SOLVED] GLTF model not loading

Help & Support
1

Good afternoon guys,

I have a GLTF model that i want to load by playcanvas-gltf.js. I did what the documentation of this script show, but nothing happens and no error is displayed.

My project is:

PlayCanvas | HTML5 Game Engine

And the script is:

gltf-load.js

GltfLoad.prototype.initialize = function() {
    var gltfAsset = this.app.assets.find('BoxTextured.gltf');
    var binAsset =  this.app.assets.find('BoxTextured.bin');
    var self = this;

    var json = ab2str(gltfAsset.resource);
    var gltf = JSON.parse(json);
    loadGltf(gltf, this.app.graphicsDevice, gltfCallback, {buffers: binAsset.resource, processUri: texturePath});

    function texturePath(url, callback){
        callback(self.app.assets.find('BoxTextured.png').getFileUrl());
    }

    function gltfCallback (model, textures, animationClips) {
        // Wrap the model as an asset and add to the asset registry
        var asset = new pc.Asset('gltf', 'model', {
            url: ''
        });
        asset.resource = model;
        asset.loaded = true;
        self.app.assets.add(asset);

        // Add the loaded scene to the hierarchy
        var gltf = new pc.Entity('gltf');
        gltf.addComponent('model', {
            asset: asset
        });
    
        console.log(asset);
        console.log(gltf);
    
        gltf.model.meshInstances[0].material = new pc.StandardMaterial();
        gltf.model.meshInstances[0].material.update();
        self.app.root.children[0].addChild(gltf);
    }

};

// source: http://stackoverflow.com/a/11058858
function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint8Array(buf));
}

Any idea of what is going on?

2

Any errors in the browser console?

3

No, everything going ok, the browser is finding and downloading all the files (gltf, bin and png) and the engine is creating the entities

4

So you can’t see it? Is the camera in the right place? (eg is it in the model/is the model too small/is the camera looking at the model)?

5

It’s because the glTF loader only works with GLB or embedded (single file) glTF files if you are using the Editor. You have are trying to load an unbundled glTF file.

If you were using just the Engine stand-along, you could also load unbundled glTF.

6

Is there any way to load this unbundled glTF at the editor via script?

7

Only if you place the unbundled glTF files on your own server somewhere. This is because the loader code tries to load unbundled files from paths relative to the gltf file itself. But when you upload all the files to the Editor, they’re moved to unrelated folders. It’s conceivable that the glTF loader code could be updated to use the PlayCanvas server file locations, but I personally don’t have time to do that right now. Ideally, you should be using GLB anyway, because it’s a more efficient serialization format for GLTF (fewer HTTP requests, smaller binary format).

8

Shouldn’t this section find the image file even in another path?

loadGltf(gltf, this.app.graphicsDevice, gltfCallback, {buffers: binAsset.resource, processUri: texturePath});

function texturePath(url, callback){
    callback(self.app.assets.find('BoxTextured.png').getFileUrl());
}

Because before using this function in ProcessUri, the player gave an error saying that it is not possible to find the files, but now it is finding

1 Like
9

Hmmm, yeah, I guess so. I mean, I’ve never tried it. But if it works for you, great! :tada: