I get the error Unexpected magic: 1329865020 when trying to import my glb file using scene loader.
BABYLON.SceneLoader.ImportMesh("", "../assets/", "demo.glb", scene, function (newMeshes, particleSystems, skeletons) {
// do stuff here
});
I am using Webpack and Vue Cli. How can I solve this issue?
Hi. We need more details.
From where you have the glb file. Do you export it from Max, Blender or other software?
Did you try it on https://sandbox.babylonjs.com and there is working?
Did you import Gltf loader?
More of your code will help too 
Hey @MarianG, it was exported in Max by an artist as a gltf file. I used an online converter by sbtron. I tried the sandbox and everything works fine there. I imported the gltf loader. The sample code is in my original post. The code works fine if I import a glb using a URL like rawgit, but does not work with files that are stored locally.
Then I have no idea.
Let see maybe somebody else can help you
By imported locally you meant from a local webserver? Because browsers does not allow you to load data from localfile system directly (for security reasons)
Yes, I mean a local web server, not the file system.
There is a magic number at the beginning on a GLB file. The Unexpected magic: 1329865020 error means that the beginning of the header of the GLB is wrong. 1329865020 in hex is 4F44213C which doesn’t match the expected value of 46546C67. What kind of local web server are you using?
I am using the webpack server that comes with the Vue command line tool.
that should work then. Do you have any console or network error in f12?
Can you share your page somewhere so we can see it live?
I don’t have a live version, but I have created a repo that reproduces the issue: GitHub - dtrinh100/babylon-glb-issue
the file duck.glb is returning “<DOCTYPE html><html lang=“en”><head>…” you need to serve the file from your /public assets folder.
edit: move duck.glb into /public/assets/ (you need to make that folder).
Is there any other way to reference a folder outside of /public? Maybe something to be added to tsconfig.json
hi @IgorAPM welcome to the forums! if you had the right bundler you could reference outside of /public, but it would be then built into your bundle and slow down your initial load. In the tsconfig, you can add (this is how vue.js links components with “@/…”):
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"external-assets": ["../../folder/*"
}
}
}
Can’t say I would really recommend that. What I would do is probably run a web server and make the additional assets available via CORS. Assuming when you deploy you’ll have the assets available then you can just run another server (expressjs/koa/apache/etc) to serve over a different port than CRA for development and then they serve over the same port in production. I do that quite a bit when I am building an API and FE at the same time, but would work well for assets and you could even reverse proxy.
edit - i just looked more on the internet and it looks like you have some options without ejecting as well:
oklas/react-app-rewire-alias: Alias and multiple src directory for rewired create-react-app (github.com)
@brianzinn
using “@babylonjs/core”: “4.2.0”,"@babylonjs/loaders": “4.2.0”.
The issue is still the same:
BJS - [12:33:25]: Unable to load from ./Hand.glb: Unexpected magic: 1329865020
SceneLoader.Append("./", “Hand.glb”, scene, function (newMeshes) {
console.log(scene);
});
Tried to load the glb file from ./…/public/assets/Hand.glb, ./assets/Hand.glb and ./Hand.glb
hi @ali.naim - good question. We’ve all had trouble with serving assets! I would suspect it is because you are using a router or have deployed to a subdirectory. The URLs starting with “.” are relative to your current path. So, if you are at localhost/path1/ then./X will go to localhost/path1/X. For this reason it’s better to use an absolute path.
Since you are using public then maybe you have React installed, if so and you are using CRA then a convenience is provided:
`${process.env.PUBLIC_URL}/assets/Hand.glb`
If you are deploying to a static subfolder then the homepage needs to be set - there are instructions when you npm run build.
If you aren’t using React then have a look in your network tab and see what is being served as well as looking up what many bundlers call a base or root url. Depending on your webserver it could also be an issue with setting up mime types or serving different file extensions - you can try that out with common ones like ‘jpg’.