Not able to load "gltf" asset on chrome latest browser

Not able to load .gltf on my browser, please help me


Sorry for sharing code instead of playground, I don’t know how to upload asset to a playground


<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>

            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
    <canvas id="renderCanvas"></canvas>
        var canvas = document.getElementById("renderCanvas");

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var delayCreateScene = function () {
    var scene = new BABYLON.Scene(engine);

    BABYLON.SceneLoader.Append("assets/", "simple_3d.gltf", scene, function (scene) {
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.alpha += Math.PI;

    return scene;
                window.initFunction = async function() {
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = delayCreateScene();};
        initFunction().then(() => {sceneToRender = scene                    

        // Resize
        window.addEventListener("resize", function () {

After Edit
Considering suggestion given by @RaananW I tried using web-server to serve file requests, but still I’m facing same issue

I’ve also tried another approach, I uploaded asset to my github repo and used that URL for loading but got weird error


    BABYLON.SceneLoader.Append("", "ABeautifulGame.gltf", scene, function (scene) {
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.alpha += Math.PI;

In this case fetch was successful - I checked network tab

But in console I’m seeing this error

Asking a question with no context won’t allow us to help. The file is probably not hosted on your sever, but just pasting code and a screenshot of the error log won’t get you very far, sorry.

P.S. - I hope I can ask that - is this really your name?

My apologise if I’ve not followed best practices of asking question.

Basically what I’am trying to do is for some hackathon event I’ve planned to integrated Babylon.js with e-commerce store to render 3d Objects with bit of AR, if this works well we might even include this with our platform

To get started with this I’ve just downloaded code from one of playgrounds mentioned in the docs and tried running it, but got above error, before asking questions I’ve tried lot of things like importing gitlfloader
<script src="babylon.glTFFileLoader.js"></script>, tried with different browsers and versions but none of them helped. So came here for help :slight_smile:

Also Swastik is my real name in India it is used as symbol of luck (which I don’t have :sweat_smile:)

Stack trace - Hope I won’t disappoint you again by attaching scrrenshot

1 Like

The file path is not correct and your model does not exist in the given path

I don’t think so, my folder structure is very simple as below

Also I get below error when I give absolute path

    BABYLON.SceneLoader.Append("/Users/swastikn/Downloads/sample-ar/assets/", "simple_3d.gltf", scene, function (scene) {
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.alpha += Math.PI;

Are you hosting the files using a web server, or just opening the index file?

Just opening index file (test.html)

By using live server plugin, it gives an option as “open with live server”

you have to serve the files using a web server if you want to use the http protocol. Your file system will not suffice.

I just want to load them from my local without any web server and http, how can I do that ?

Last time when I had used babylonjs with 4.X version it used to work, at least in other functions where I used to load my game objects and sound related assets

i’m not sure what changed between the two versions, but if you want to load a file using http (which you are doing here) you need to get the right response from the server you are requesting the file from.
You can try using the file protocol instead, but most browsers block it, at least without the right permissions. You can also encode the file to base64 and load it using a data URL, but that’s a whole different story.
Just run a local web server. it’s as easy as writing npx http-server in the directory you are trying to host.

The live server he mentioned is a web server, its a vscode thing.

For the absolute paths, most node servers these days wont serve above the cwd for security reasons. Otherwise, any website or even a random ad inside an iframe could probe for stuff on your fs. You may need to prepend a slash to the root path. You could also use window.location to create the full path at runtime

with this also, I’m getting same error. I just want to load asset from my local folder, not sure why that function implementation is making http call for that. Sorry I’ve no clue what I’m doing wrong here

like this?

var path = "//Users/swastikn/Downloads/sample-ar/assets/"
BABYLON.SceneLoader.Append(path, "simple_3d.gltf",  .....

Also I didn’t get how window.location would help here

I think I should try with my own server, like using express js. To avoid all these mess

Have updated the question with what I’ve tried please check @jeremy-coleman @RaananW @Dad72

did you load the index file using localhost:8080, or did you load it again using the index.html as a file in the browser?

So how I’m doing is, I’m running http-server command on my project directory, and then navigating to endpoint provided by http-server ( and then changing path to At this point test.html will call

BABYLON.SceneLoader.Append("", "simple_3d.gltf", scene, function (scene) {

But here when I check network tab 3d model is fetched successfully but getting same error on console

Successfully loaded 3d file

Error on console

1 Like

wasn’t the file in the assets directory? Are you sure the file is really served using the server? what is the result in the preview tab? Doesn’t the glTF require other files? images for the textures?

Look, something is wrong somewhere. You need to check if the file is opened in the browser (downloaded when you use the URL, for example).
I also wonder what this “OK” message you are getting - there is no reason to return “OK” as string, and I don’t believe we have this return code in the framework. This is something you will have to debug on your own. We can continue back and forth, but this is a local issue - either the html file or the glTF has an issue here.
We love helping debugging projects. if you want to share the entire project on github I am sure we will be more able to help.

1 Like