Importing mesh from filesystem

Questions
1

I am trying to import a .glb file My folder structure looks like this:
image
When I use let res= BABYLON.SceneLoader.ImportMeshAsync("", "/img/", "crate.glb", scene);, I get the following error:
image
which made me think I had the wrong path. I tried alot of different things to get “the right path”, but nothing works.
When I use new BABYLON.Texture('/img/block.jpg', scene), everything works fine and the material has the desired texture from the block.jpg.

When using devTools to look at the requests, both seem to have a very similar url but one fails
image
image

Also, I opened the crate.glb with the BabylonJS Sandbox and it worked fine, so the file itself shouldn’t be the problem.

2

Please check this article about cross-origin policy - A new default Referrer-Policy for Chrome - strict-origin-when-cross-origin - Chrome Developers.

I believe you may find an answer there.

3

does opening the URL returning the file / download the file? i.e. https://localhost:7022/img/crate.glb should be available. If it isn’t, and is still returning 404, something might be wrong with your server definition. Not sure it is a CORS issue, especially since your image is working. Might be a mime-type issue (i.e. - server is not sending any file it doesn’t know what mime-type it is)

4

@labris I read the article and didn’t find something that struck me as the solution to my problem, but maybe I’m just too tired :slight_smile: The article seems to be about behaviour for cross-origin requests, but my request is same-origin:
image

@RaananW That’s one of the first things I tried as well, and no it didn’t download the file, its a 404. Just to make sure I moved the .glb file from the folder I originally had it in to the folder /img where block.jpg is which I knew worked. But it still isn’t found.

5

That’s a server issue. Not sure what local server you are using, but something is configured wrong there.

6

Okay, I’ll look into it then, thank you for the support.
Do you have an idea why the .jpg works, but the .glb not? That really confuses me…

7

I can only think of mime-type support. change the filename of the glb to png and see if you can download it (of course not a solution but will get you closer to resolving the issue). It is probably not related, but make sure you are case-sensitive.
But it could be many other reasons. Server-related for sure.

1 Like
8

Yeah if I change it to .png, it works and I can access it

9

great (or not). now you know what the issue is. good luck! :slight_smile:

10

So after suffering through almost a day worth of reading & trying solution from SO, forums etc., I’ve finally found a solution that works (for now at least). What I had to do was add < add mimeType="model/gltf-binary" enabled="true" /> to my applicationhost.config file in the IISExpress folder. In addition, I had to add the following to my Program.cs file: (ASP.NET specific)

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = new FileExtensionContentTypeProvider
    {
        Mappings =
        {
            [".gltf"] = "model/gltf+json",
            [".glb"] = "model/gltf-binary",
            [".bin"] = "application/octet-stream",
            [".obj"] = "model/obj"
        }
    };
});

Other things I tried that didn’t work for me:

  • Adding the following to Startup.cs:
StaticFileOptions options = new StaticFileOptions { ContentTypeProvider = new FileExtensionContentTypeProvider() };
((FileExtensionContentTypeProvider)options.ContentTypeProvider).Mappings.Add(new KeyValuePair<string, string>(".glb", "model/gltf-binary"));
  • Creating a web.config with the following content:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
	<system.webServer>
		<staticContent>
			<remove fileExtension=".gltf" />
			<mimeMap fileExtension=".gltf" mimeType="model/gltf+json" />
			<remove fileExtension=".glb" />
			<mimeMap fileExtension=".glb" mimeType="model/gltf-binary" />
			<remove fileExtension=".bin" />
			<mimeMap fileExtension=".bin" mimeType="application/octet-stream" />
			<remove fileExtension=".obj" />
			<mimeMap fileExtension=".obj" mimeType="model/obj" />
		</staticContent>
	</system.webServer>
</configuration>

@RaananW Thanks a lot for pointing me towards MIME, who knows how much longer I would have taken if it weren’t for that suggestion

4 Likes