How to load .gltf in a Blazor application

Question

I am trying to load .gltf model using three.js into my Blazor application. However the server does not serve this type of files. I am aware that MIME type must be added, but for some reasons, that cannot be done with Blazor web app as the 'app' variable in Startup.cs is an instance of IComponentsApplicationBuilder. Can anybody help me with this issue.

Answer 1

IIS and IIS Express will not serve files with unknown extensions. In your error console, you see 404 (Not Found) which means either the file is missing, or the MIME type for the file is not registered.

I would recommend you try adding a web.config file to the root of your application, with the following contents:

<?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" />
        </staticContent>
    </system.webServer>
</configuration>

The <remove ... /> statements are there to avoid any possible conflicts with any MIME type registrations that happen in parent folders or at the root-level or system-level. It's always safe to remove, but it's a configuration error to add one that already exists.

Here's a reference to where the glTF Mime Type was defined.

Some versions of IIS Express will disregard MIME types from web.config. If this happens, the above file may not work. In that case you may have to edit the IIS Express configuration file directly, to add the information shown above. Check this SO answer to see how to locate that config file.

Answer 2

There's no need to mess around with web.config.

You just need to inject the StaticFileOptions from Program.cs.

using Microsoft.AspNetCore.StaticFiles;


...


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

Full docs with an alternative option:

https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-6.0#blazor-server-file-mappings-and-static-file-options