Any file load attempt fails with uncaught exception

Questions
1

I am displaying a WebGL renderer, written in typescript with React, any I am able to display my renderer, create geometry, interact with it and everything.

However anytime I try to use a loader (I have tried both Loader and GLTFLoader) I recieve an error in the runtime when the loader goes to collect either a local file or a file over http.

Currently I have it pointing directly to one of the free threejs resources, to make sure that I am pointing to a valid file, and just trying to print the data at each stage of the load.

this.loader.load('https://threejsfundementals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf'
      , function ( gltf: any ) { console.log(gltf);
    } , function (xhr: any ) { console.log(xhr); 
    }, function (e: any)  { console.log(e);
    }
);

In the runtime, I only see the data printed from the onProgress(xhr) callback, and the onLoad(gltf) and onError(e) functions are never called. However I recieve the following error immediately after the onProgress callback prints

react_devtools_backend.js:6 onerrorLogger: {"stack":"TypeError: Cannot read property 'response' of 
undefined\n    at https://localhost/res/ThreeDViewer/ThreeDViewer.js? 
no_cache=1588859265686:40557:26\n    at XMLHttpRequest.<anonymous> 
(https://localhost/res/perspective/xhr-length-computable.min.js:3:10)","message":"Cannot read 
property 'response' of undefined","name":"TypeError","logData":{"msg":"Uncaught 
Exception","errorMsg":"Uncaught TypeError: Cannot read property 'response' of 
undefined","url":"https://localhost/res/ThreeDViewer/ThreeDViewer.js? 
no_cache=1588859265686","line number":40557,"column":26}}

And then the following error

ThreeDViewer.js?no_cache=1588859265686:40557 Uncaught TypeError: Cannot read property 
'response' of undefined
at ThreeDViewer.js?no_cache=1588859265686:40557
at XMLHttpRequest.<anonymous> (xhr-length-computable.min.js:3)

When I dig into it, the error is happening at line 35816 in the three.js module, I have been racking my head against this for ages, any ideas?

Thanks for any help,
Keith G.

2

https://threejsfundementals.org/ is down at the moment:

Can you try to load a local glTF file and see if that works?

Note that .gltf files usually come with a .bin file that needs to be in the same directory.

Loader is not intended to be used directly.

3

Thank you so much for the prompt response!

Just redid it again pointing to a local item, and recieved the exact same errors

this.loader.setPath('/res/ThreeDViewer/');
this.loader.load('img/Trapezoid.glb'
      , function ( gltf: any ) { console.log(gltf);
    } , function (xhr: any ) { console.log(xhr); 
    }, function (e: any)  { console.log(e);
    }
);

I re-exported the glb from blender, and didnt see any other .bin files, I also loaded this directly with Don McCurdys viewer and it loads fine there

Here is the file, its a pretty simple little shape
Trapezoid.glb (2.2 KB)

Update: I tried this with a .glb and a .gltf, same result

4

I also reconstructed everything to use the OBJ and MTL loaders, and get the same error

let objLoader2: any = new OBJLoader2();
let callbackOnLoad = ( object3d: any ) => {
  this.scene.add( object3d );
  console.log( 'Loading complete for object');
};

let onLoadMtl = ( mtlParseResult: any ) => {
  objLoader2.setModelName('cube');
  objLoader2.setLogging( true, true );
  objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
  objLoader2.load( '/res/ThreeDViewer/img/cube/cube.obj', callbackOnLoad, null, null, null );
};
let mtlLoader: any = MTLLoader();
mtlLoader.load( '/res/ThreeDViewer/img/cube/cube.mtl', onLoadMtl );

However this one will not show me the place that it fails in the three.js file, but here is the error

TypeError: Cannot read property 'load' of undefined
at Viewer.componentDidMount (ThreeDViewer.js?no_cache=1588862221557:200)
at Pj (react-dom.production.min-16.11.0.js:158)
at unstable_runWithPriority (react.production.min-16.11.0.js:25)
at pb (react-dom.production.min-16.11.0.js:59)
at Ma (react-dom.production.min-16.11.0.js:151)
at We (react-dom.production.min-16.11.0.js:132)
at react-dom.production.min-16.11.0.js:60
at unstable_runWithPriority (react.production.min-16.11.0.js:25)
at pb (react-dom.production.min-16.11.0.js:59)
at Rg (react-dom.production.min-16.11.0.js:60)
5

Alright I managed to bandaid the problem, in the three.js source, the Loader.load XMLHttpRequest event listener was not getting a response directly in the function, so I needed to reference the response through request.response instead of this.response. As well later in the script I needed to use request.status instead of this.status.

Here is the code before (notice the references to “this”)

	var request = new XMLHttpRequest();

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

			request.addEventListener( 'load', function ( event ) {

				var response = this.response;

				var callbacks = loading[ url ];

				delete loading[ url ];

				if ( this.status=== 200 || this.status=== 0 ) {

					// Some browsers return HTTP Status 0 when using non-http protocol
					// e.g. 'file://' or 'data://'. Handle as success.

					if ( this.status=== 0 ) { console.warn( 'THREE.FileLoader: HTTP Status 0 received.' ); }

					// Add to cache only on HTTP success, so that we do not cache
					// error response bodies as proper responses to requests.
					Cache.add( url, response );

Here is the code after my adjustment (Notice the new status variable, and the references to request instead of this):

	var request = new XMLHttpRequest();

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

			request.addEventListener( 'load', function ( event ) {

				var response = request.response;
				
				var callbacks = loading[ url ];

				delete loading[ url ];

				var status = request.status;

				if ( status === 200 || status === 0 ) {

					// Some browsers return HTTP Status 0 when using non-http protocol
					// e.g. 'file://' or 'data://'. Handle as success.

					if ( status === 0 ) { console.warn( 'THREE.FileLoader: HTTP Status 0 received.' ); }

					// Add to cache only on HTTP success, so that we do not cache
					// error response bodies as proper responses to requests.
					Cache.add( url, response );

I don’t know if this was a bug within my specific environment, or a bug overall, but i thought I would share the solution in case this helps anyone else!