babylon.glTFFileLoader.js:2571 Uncaught TypeError: this._errorCallback is not a function

[HBakri]

I getting this annoying error when loading GLTF  3D models on my Apache web server on Linux system.

babylon.glTFFileLoader.js:2571 Uncaught TypeError: this._errorCallback is not a function
    at GLTFLoader._onError (babylon.glTFFileLoader.js:2571)
    at babylon.glTFFileLoader.js:3265
    at e.callback (babylon.glTFFileLoader.js:3168)
    at e.notifyObservers (babylon.js:3)
    at babylon.glTFFileLoader.js:3180
    at XMLHttpRequest.e.onreadystatechange (babylon.js:3)

The code runs like a charm locally. I mean if I have the .gltf, .bin and the textures. When uploaded to the  web server connected to a back-end Omeka (a digital asset management system) where we are storing our 3D models files with metadata. The following  JS code is the one used, it loads Objs and gltf. Apparently the .gltf and .bin are fetched but not the textures. Although the JSON images field  in the gltf contain the right names and paths.

<script>
    function RenderLocal(RelativePath, MeshName) {
        console.log("I entered RenderLocal(RelativePath, MeshName) ");
        console.log("RelativePath: " + RelativePath + "  MeshName: " + MeshName);

		//Making sure there is no trailing spaces
        var RelativePathTrimmed = RelativePath.trim();
        var MeshNameTrimmed = MeshName.trim();


        //Retrieving form Canvas
        var canvas = document.getElementById('renderCanvas');

        //Creating an instance from the Engine and assigning it to the Canvas
        var engine = new BABYLON.Engine(canvas, true);

        //Loading text is controlled using loadingUIText :
        engine.loadingUIText = "Please wait for the Model to load...";

        var createScene = function () {
            console.log("NEW - Trimmed RelativePath: " + RelativePathTrimmed + "  MeshName: " + MeshNameTrimmed);


            //Creating a BABYLON scene
            var scene = new BABYLON.Scene(engine);

            //Clear the background scene as black
            scene.clearColor = new BABYLON.Color3(0, 0, 0);

            //Adding a light
            //var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
            var light = new BABYLON.HemisphericLight("Omni", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 1;

            //var loader = new BABYLON.AssetsManager(scene);

            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

            //Adding an Arc Rotate Camera
            // var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            //camera.attachControl(canvas, false);


            //Adding an Arc Rotate Camera
            // var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            // camera.attachControl(canvas, false);

            var assetsManager = new BABYLON.AssetsManager(scene);

            var meshTask = assetsManager.addMeshTask("skull task", "", RelativePathTrimmed, MeshNameTrimmed);

            //BABYLON.SceneLoader.ImportMesh("", RelativePath, MeshName, scene, ready);

            meshTask.onSuccess = function (task) {

                var myMesh = task.loadedMeshes[0];
                task.loadedMeshes[0].position = BABYLON.Vector3.Zero();

                // Create a default arc rotate camera and light.
                scene.createDefaultCameraOrLight(true, true, true);

                // The default camera looks at the back of the asset.
                // Rotate the camera by 180 degrees to the front of the asset.
                scene.activeCamera.alpha += Math.PI;

                // myMesh.computeWorldMatrix(true);
                // myMesh.refreshBoundingInfo();
                // var meshCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", -Math.PI / 2, 1.2, 140, new BABYLON.Vector3(0, 0, -10), scene);
                // meshCamera.attachControl(canvas, false);
                // scene.activeCamera = meshCamera;

            };

            meshTask.onError = function (task, message, exception) {
                console.log(message, exception);
            };



            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });

            assetsManager.onProgress = function (remainingCount, totalCount, lastFinishedTask) {
                engine.loadingUIText = 'We are loading the scene. ' + remainingCount + ' out of ' + totalCount + ' items still need to be loaded.';
            };

            assetsManager.onFinish = function (tasks) {
                engine.runRenderLoop(function () {
                    scene.render();
                });
            };

            assetsManager.load();

            return scene;
        };

        var scene = createScene();

        engine.runRenderLoop(function () {
            scene.render();

        });
        //$("#renderCanvas").resizeCanvas(width = "800", height = "600");
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    }

    var htmlInput_PHP = <?php echo json_encode( $item ); ?>;
	console.log("List in htmlInput_PHP: " + htmlInput_PHP );
    var htmlInput_PHP_length = htmlInput_PHP.length;
    var OBJRegExp = '.obj';
	var GLTFRegExp = '.gltf';
    var ObjFileToLoad = '';
    for (var i in htmlInput_PHP) {
        if (htmlInput_PHP[i].endsWith(OBJRegExp)|| htmlInput_PHP[i].endsWith(GLTFRegExp)) {
            console.log("htmlInput_PHP[i] is: ");
            console.log(htmlInput_PHP[i]);
            ObjFileToLoad = htmlInput_PHP[i];
        }
    }
    var filename = ObjFileToLoad.replace(/^.*[\\\/]/, '')
    console.log("FileName Extracted: " + filename);
    var relativePath = ObjFileToLoad.replace(filename, "");
    console.log("Relative Path Extracted is: ");
    console.log(relativePath);
    RenderLocal(relativePath, filename);

</script>

The following injection of PHP code in JS

var htmlInput_PHP = <?php echo json_encode( $item ); ?>;

Attached 2 images (console of Google Chrome + an image on the Network Inspector of Google Chrome)

this is to fetch a PHP array from Omeka back-end and transforming it to JS so that we have  the full paths of the gltf file, .bin binary file and all textures pertaining to the item chosen by the user as you can see in the images attached the list of paths are correct so what is the problem?  Actually this code worked fine with other items in the .obj format. 

Is it possible the .manifest thing that keeps showing in the console or Network inspector or I reckon maybe the gltf JSON 'images' field should contain some relative path I am not sure so that Apache can go and fetch the textures? I am extremely confused

Please any help is appreciated...

[Guest]

You are on a pretty old version of BJS

Do you mind moving to the latest one? (including the gltf loader)

[HBakri]

Thanks for the reply. Sorry I live in UK and we had a severe snow storm. Now back to work :-) 

I will check and get back to you. Even with an old version,  why it is working locally but not remotely on Apache server?

[HBakri]

With the latest version only a warning shows and the gltf model do not load. I should mention the model works like a charm in the Sandbox.

I  generated today the Babylon script:

<script src="js/babylon.custom05-03.js"></script>

I am getting a warning please see the Yellow warning:

babylon.custom05-03.js:3 BJS - [12:45:54]: Unable to find a plugin to load .gltf files. Trying to use .babylon default plugin.
t._WarnEnabled @ babylon.custom05-03.js:3
t._getPluginForExtension @ babylon.custom05-03.js:32
t._getPluginForFilename @ babylon.custom05-03.js:32
t._loadData @ babylon.custom05-03.js:32
t.ImportMesh @ babylon.custom05-03.js:32
i.runTask @ babylon.custom05-03.js:45
e.run @ babylon.custom05-03.js:45
t._runTask @ babylon.custom05-03.js:45
t.load @ babylon.custom05-03.js:45
createScene @ objectsBabylonGLTF.php?id=27:163
RenderLocal @ objectsBabylonGLTF.php?id=27:168
(anonymous) @ objectsBabylonGLTF.php?id=27:199

I am desperate so I tried an older Babylon Custom  Script generated maybe in Aug/ Sep 2017. I got  maybe something  more meaningful:

babylonFinally.js:3 BJS - [12:50:41]: Buffer access is out of range
t._ErrorEnabled @ babylonFinally.js:3
(anonymous) @ babylonFinally.js:28771
GLTFLoader._onRenderReady @ babylonFinally.js:28771
GLTFLoader.removePendingData @ babylonFinally.js:29387
(anonymous) @ babylonFinally.js:29315
e.notifyObservers @ babylonFinally.js:2
(anonymous) @ babylonFinally.js:29326
e.onreadystatechange @ babylonFinally.js:3
XMLHttpRequest.send (async)
h @ babylonFinally.js:3
t.LoadFile @ babylonFinally.js:3
GLTFLoader._loadBufferAsync @ babylonFinally.js:29324
GLTFLoader._loadBufferViewAsync @ babylonFinally.js:29337
GLTFLoader._loadAccessorAsync @ babylonFinally.js:29375
_loop_2 @ babylonFinally.js:29017
GLTFLoader._loadVertexDataAsync @ babylonFinally.js:29065
_loop_1 @ babylonFinally.js:28960
GLTFLoader._loadMeshData @ babylonFinally.js:28996
GLTFLoader._loadMesh @ babylonFinally.js:28926
(anonymous) @ babylonFinally.js:28869
GLTFLoader._traverseNode @ babylonFinally.js:29163
GLTFLoader._traverseNode @ babylonFinally.js:29168
GLTFLoader._traverseNode @ babylonFinally.js:29168
GLTFLoader._traverseNode @ babylonFinally.js:29168
GLTFLoader._traverseNode @ babylonFinally.js:29168
GLTFLoader._traverseNodes @ babylonFinally.js:29157
GLTFLoader._loadScene @ babylonFinally.js:28869
GLTFLoader._loadAsync @ babylonFinally.js:28760
GLTFLoader.importMeshAsync @ babylonFinally.js:28726
GLTFFileLoader.importMeshAsync @ babylonFinally.js:26275
_ @ babylonFinally.js:28
(anonymous) @ babylonFinally.js:28
e.onreadystatechange @ babylonFinally.js:3
XMLHttpRequest.send (async)
h @ babylonFinally.js:3
t.LoadFile @ babylonFinally.js:3
u @ babylonFinally.js:28
t @ babylonFinally.js:28
(anonymous) @ babylonFinally.js:28
XMLHttpRequest.send (async)
t.checkManifestFile @ babylonFinally.js:28
t @ babylonFinally.js:28
t.ImportMesh @ babylonFinally.js:28
t.run @ babylonFinally.js:40
h._runTask @ babylonFinally.js:40
h.load @ babylonFinally.js:40
createScene @ objectsBabylonGLTF.php?id=27:162
RenderLocal @ objectsBabylonGLTF.php?id=27:167
(anonymous) @ objectsBabylonGLTF.php?id=27:198
 

Why there is nothing that says what is the problem in new Babylon Build... Attached first picture latest Babylon (05-03-2018), the second picture (a script from maybe Aug 2017), the third when I checked everything in VersionBuilder and generated the Babylon JS Script.

Getting: BJS - [13:37:21]: glTF Loader: #/bufferViews/2: Invalid typed array length: 13734960

What is going on here?

[RaananW]

Are you loading the GLTFLoader module? http://doc.babylonjs.com/how_to/gltf

Seems like the plugin is missing

[Guest]

Can you make sure that your custom build includes the gltf loader?

[bghgary]

Also, it is likely that the glTF asset you are trying to load isn't valid. Check the asset against the glTF Validator to see if it passes the checks.

[RaananW]

I like it that there are 3 totally valid answers to this issue