2

I've created a three.js scene with a few various loaded assets leveraging the GLTFLoader.js loader. My scene was working as expected until recently, and now I've been experiencing issues with getting one of these assets to load, and specifically receiving the following error in my Console:

TypeError: Failed to fetch

And the following stacktrace (which to me seems rather vague in nature):

_onError    @   GLTFLoader.js:77
Promise.catch (async)       
parse   @   GLTFLoader.js:1823
parse   @   GLTFLoader.js:275
(anonymous) @   GLTFLoader.js:95
(anonymous) @   three.min.js:6
load (async)        
load    @   three.min.js:6
load    @   GLTFLoader.js:91
make_3d @   main.js?m=1642396149.9939363:1646

The corresponding line 1646 in my main.js file under the make_3d function is associated with the first loader.load() invocation:

const loader = new THREE.GLTFLoader();

// Throws error
loader.load('assets/my_object/scene.gltf', function (gltf) {
    my_obj = gltf.scene;
    my_obj.scale.set(2, 2, 2)
    my_obj.position.set(1, 1, 1)
    scene.add(my_obj);       
})

// Does not throw error
loader.load('assets/my_object2/scene.gltf', function (gltf) {
    my_obj2 = gltf.scene;
    my_obj2.scale.set(.1, .1, .1)
    scene.add(my_obj2);
})

The CDN references I'm using are below:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js
https://threejs.org/examples/js/controls/OrbitControls.js

As I mentioned above, I am loading additional objects (albeit slightly smaller in size, scene.bin of size 6318KB vs 187KB), and these other objects loaded without any errors being thrown.

There is a sizable amount of code associated with the overall project, so I've tried to narrow it down here. I hope I'm not missing something obvious here.

UPDATE

I've since been able to identify that the source of the error is stemming from parser.getDependencies('scene') inside of GLTFLoader.js:

parse( onLoad, onError ) {

    const parser = this;
    const json = this.json;
    const extensions = this.extensions; // Clear the loader cache

    this.cache.removeAll(); // Mark the special nodes/meshes in json for efficient parse

    this._invokeAll( function ( ext ) {

        return ext._markDefs && ext._markDefs();

    } );

    Promise.all( this._invokeAll( function ( ext ) {

        return ext.beforeRoot && ext.beforeRoot();

    } ) ).then( function () {

        console.log(parser.getDependencies('scene'));

        return Promise.all( [ parser.getDependencies( 'scene' ), parser.getDependencies( 'animation' ), parser.getDependencies( 'camera' ) ] );

    } ).then( function ( dependencies ) {

        const result = {
            scene: dependencies[ 0 ][ json.scene || 0 ],
            scenes: dependencies[ 0 ],
            animations: dependencies[ 1 ],
            cameras: dependencies[ 2 ],
            asset: json.asset,
            parser: parser,
            userData: {}
        };
        addUnknownExtensionsToUserData( extensions, result, json );
        assignExtrasToUserData( result, json );
        Promise.all( parser._invokeAll( function ( ext ) {

            return ext.afterRoot && ext.afterRoot( result );

        } ) ).then( function () {

            onLoad( result );

        } );

    } ).catch( onError );

}
2
  • What's the "Network" panel doing in DevTools? Is it showing a failed network request from the app? The "parse" error makes me suspicious it's trying to parse something it thought would be JSON, but wasn't.
    – emackey
    Jan 17, 2022 at 22:03
  • No failed network requests in the DevTools. I've just added some additional info to my original post, appears to be some issues with the dependencies for the scene. Still attempting to dig a bit deeper. Any further insight or ideas are much appreciated!
    – rahlf23
    Jan 18, 2022 at 6:31

1 Answer 1

0

As mentioned by @emackey in the comments, it appears that the root of the issue is grounded in a JSON parsing issue in the caching logic of GLTFLoader.js, which leads to a rejected promise in parser.getDependencies( 'scene' ).

The solution for the time being is to clear your browser cached images and files and the loaded asset will appear in the scene without issue.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.