Can't import glb files getting error: Invalid magic number found in glb header

I’m building a web game engine only with react, because the only other way to use editor with a custom website seems to be to host it separately and connect with iframe, then you have to send all input to the game through messages.

I thought it was simpler to use playcanvas directly, so in pretty much all the playcanvas engine only examples, glb files are imported like this:

const assets = {
    helipad: new pc.Asset(
        'helipad-env-atlas',
        'texture',
        { url: rootPath + '/static/assets/cubemaps/helipad-env-atlas.png' },
        { type: pc.TEXTURETYPE_RGBP, mipmaps: false }
    ),
    statue: new pc.Asset('statue', 'container', { url: rootPath + '/static/assets/models/statue.glb' }),
    cube: new pc.Asset('cube', 'container', { url: rootPath + '/static/assets/models/playcanvas-cube.glb' })
};

const device = await pc.createGraphicsDevice(canvas);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;

createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem];
createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler];

const app = new pc.AppBase(canvas);
app.init(createOptions);

const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
    app.start();

    // get the instance of the statue and set up with render component
    const statueEntity = assets.statue.resource.instantiateRenderEntity();
    app.root.addChild(statueEntity);

    // Create an Entity with a camera component
    const camera = new pc.Entity();
    camera.addComponent('camera', {
        clearColor: new pc.Color(0.2, 0.1, 0.1),
        farClip: 100
    });
    camera.translate(-20, 15, 20);
    camera.lookAt(0, 7, 0);
    app.root.addChild(camera);

    // set skybox
    app.scene.envAtlas = assets.helipad.resource;
    app.scene.toneMapping = pc.TONEMAP_ACES;
    app.scene.skyboxMip = 1;

    // spin the meshes
    app.on('update', function (dt) {
        if (statueEntity) {
            statueEntity.rotate(0, -12 * dt, 0);
        }
    });
});`

In my code I run the same format, creating an assets object, creating a new Asset for each model, calling it “container” and in the third param adding the path to the file. But from my debugging it seems like there is an issue with path to my glb file. I get this invalid magic number error even if my path is something like “.glb”, even if my path doesnt point to a real location.
But when I put in the correct path it still gives me this error, so is playcanvas not really loading the glb from that location? I dont understand, my code is very similar to the example.

heres my code and the error im getting below:

var canvas = document.getElementById("application-canvas");

// Import  Model
  const assets = {
    rose: new pc.Asset('rose', 'container', {url : '../../assets/rose.glb'})
  };


const device = await pc.createGraphicsDevice(canvas);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;

createOptions.componentSystems = [
    pc.RenderComponentSystem,
    pc.CameraComponentSystem,
    pc.LightComponentSystem,
    pc.ScriptComponentSystem,
    pc.AnimComponentSystem
];
createOptions.resourceHandlers = [
    pc.TextureHandler,
    pc.ContainerHandler,
    pc.ScriptHandler,
    pc.AnimClipHandler,
    pc.AnimStateGraphHandler
];



// Start and init Application
var app = new pc.AppBase(canvas);
app.init(createOptions);
app.start();

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

const resize = () => app.resizeCanvas();
window.addEventListener('resize', resize);
app.on('destroy', () => {
    window.removeEventListener('resize', resize);
});


const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load( () => {
    
      // Create camera
    var camera = new pc.Entity();
    camera.addComponent("camera", { clearColor: new pc.Color(0.8, 0.8, 0.8) });
    app.root.addChild(camera);
    camera.setPosition(0, 0, 7); 

    // Create light
    var light = new pc.Entity();
    var light = new pc.Entity();
    light.addComponent('light');  
    light.rotate(45, 0, 0);
    app.root.addChild(light);
    app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);  
    
    
    const rose = assets.rose.resource;
    app.root.addChild(rose);

    // create box entity
    const box = new pc.Entity('cube');
    box.addComponent('render', {
      type: 'box'
    });
    app.root.addChild(box);
    
});

Error :

does your glb load when dragged into the viewer?

Yes the file works just fine in every viewer ive put it in, the model shows up just fine.

I dont know how the magic number could be the wrong one when the files works in the viewer

Did you ever solve this? I’m getting the same issue

are you able to share the glb @ziggyz ?