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 );
}