Babylon JS - GLB file loading when public but not on own server

Good day everyone,

I am struggling a little bit with getting the Babylon JS viewer to work properly. I used the sample code:

<html>
<head>
  <title>Babylon.js Viewer - Display a 3D model</title>
  <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> 
</head>
<body>
    <babylon model="https://models.babylonjs.com/boombox.glb" templates.main.params.fill-screen="true"></babylon>
</body>
</html>

This works, but when I put the boombox.glb on my own server and have a custom link E.g. http://bla.com/models/boombox.glb I get the notification that the file cannot be loaded. In the inspector (f12) in Chrome I get the following warning: Failed to load scene. Error status: 404 Not Found - Unable to load .

If I manually browse towards the location I am able to download the file. But in order to rule out my own server I tried putting it on a publicly accessible site such as dropbox or google docs but everytime I get the unable to load file.

This file is simple the downloaded version of the: https://models.babylonjs.com/boombox.glb.

How can I host my own GLB files and have them rendered?

Is your viewer html file uploaded on your server too?

The file with the code snippet is on my server as well. The only thing I do not have on my server right now is the viewer.js script. That is being sourced from:

<script src="https://preview.babylonjs.com/viewer/babylon.viewer.max.js"></script> 

Is the mime type authorized on your server ? and what kind of server are you using ?

I noticed online a couple of mentions of the mime type hence I’ve added the following to my web.config

  <mimeMap fileExtension=".glb" mimeType="model/vnd.gltf.binary" />
  <mimeMap fileExtension=".gltf" mimeType="model/gltf" />
  <mimeMap fileExtension=".fx" mimeType="application/fx" />
  <mimeMap fileExtension=".babylon" mimeType="application/babylon" />
  <mimeMap fileExtension=".babylonmeshdata" mimeType="application/babylonmeshdata" />

The server is an azure Web App (App Service).

I was going through the chrome debugger and I noticed the following odd item. At some point in the following code:

        Tools.LoadFile = function (url, onSuccess, onProgress, offlineProvider, useArrayBuffer, onError) {
            url = Tools.CleanUrl(url);
            url = Tools.PreprocessUrl(url);
            // If file and file input are set
            if (url.indexOf("file:") !== -1) {
                var fileName = decodeURIComponent(url.substring(5).toLowerCase());
                if (BABYLON.FilesInput.FilesToLoad[fileName]) {
                    return Tools.ReadFile(BABYLON.FilesInput.FilesToLoad[fileName], onSuccess, onProgress, useArrayBuffer);
                }
            }
            var loadUrl = Tools.BaseUrl + url;
            var aborted = false;
            var fileRequest = {
                onCompleteObservable: new BABYLON.Observable(),
                abort: function () { return aborted = true; },
            };
            var requestFile = function () {
                var request = new XMLHttpRequest();
                var retryHandle = null;
                fileRequest.abort = function () {
                    aborted = true;
                    if (request.readyState !== (XMLHttpRequest.DONE || 4)) {
                        request.abort();
                    }
                    if (retryHandle !== null) {
                        clearTimeout(retryHandle);
                        retryHandle = null;
                    }
                };
                var retryLoop = function (retryIndex) {
                    request.open('GET', loadUrl, true);
                    if (useArrayBuffer) {
                        request.responseType = "arraybuffer";
                    }
                    if (onProgress) {
                        request.addEventListener("progress", onProgress);
                    }
                    var onLoadEnd = function () {
                        request.removeEventListener("loadend", onLoadEnd);
                        fileRequest.onCompleteObservable.notifyObservers(fileRequest);
                        fileRequest.onCompleteObservable.clear();
                    };
                    request.addEventListener("loadend", onLoadEnd);
                    var onReadyStateChange = function () {
                        if (aborted) {
                            return;
                        }
                        // In case of undefined state in some browsers.
                        if (request.readyState === (XMLHttpRequest.DONE || 4)) {
                            // Some browsers have issues where onreadystatechange can be called multiple times with the same value.
                            request.removeEventListener("readystatechange", onReadyStateChange);
                            if ((request.status >= 200 && request.status < 300) || (request.status === 0 && (!Tools.IsWindowObjectExist() || Tools.IsFileURL()))) {
                                onSuccess(!useArrayBuffer ? request.responseText : request.response, request.responseURL);
                                return;
                            }
                            var retryStrategy = Tools.DefaultRetryStrategy;
                            if (retryStrategy) {
                                var waitTime = retryStrategy(loadUrl, request, retryIndex);
                                if (waitTime !== -1) {
                                    // Prevent the request from completing for retry.
                                    request.removeEventListener("loadend", onLoadEnd);
                                    request = new XMLHttpRequest();
                                    retryHandle = setTimeout(function () { return retryLoop(retryIndex + 1); }, waitTime);
                                    return;
                                }
                            }
                            var e = new LoadFileError("Error status: " + request.status + " " + request.statusText + " - Unable to load " + loadUrl, request);
                            if (onError) {
                                onError(request, e);
                            }
                            else {
                                throw e;
                            }
                        }
                    };
                    request.addEventListener("readystatechange", onReadyStateChange);
                    if (Tools.UseCustomRequestHeaders) {
                        Tools.InjectCustomRequestHeaders(request);
                    }
                    request.send();

I noticed that at the start it contains the proper loadUrl.

 request.open('GET', loadUrl, true); 

In the debugger it shows that it has the correct link to the file which in my case is:
digitalrealitiesplatform.azurewebsites.net/Models/Aviation/Airplane/shark.glb

but at some point in this section it changes:

if (request.readyState === (XMLHttpRequest.DONE || 4)) {
                            // Some browsers have issues where onreadystatechange can be called multiple times with the same value.
                            request.removeEventListener("readystatechange", onReadyStateChange);
                            if ((request.status >= 200 && request.status < 300) || (request.status === 0 && (!Tools.IsWindowObjectExist() || Tools.IsFileURL()))) {
                                onSuccess(!useArrayBuffer ? request.responseText : request.response, request.responseURL);
                                return;
                            }

the response URL changes to:

responseURL: "http://digitalrealitiesplatform.azurewebsites.net/index.php/product/aviation-model/digitalrealitiesplatform.azurewebsites.net/Models/Aviation/Airplane/shark.glb" 

Somewhere the string is changed and I guess tries to approach this new location but I can’t seem to figure out when the change occurs.

looks like it is trying to load from a relative path. could you try adding the pointing to the full url of the model (not relative) ?