Fetch API cannot load file:///C:/Users/Name/boxtest.fbx. URL scheme "file" is not supported

Yeah, I’ve been using console.log to log everything. It only runs the fetch once. It fails when it tries to load the texture, or rather when it tried to get the file.

I believe it is using the imageLoader and trying to put “chrome-extension://jdgkbifmkkkcgglljmlojibojoafmlhi/texture_0.png” in the image.src:

class ImageLoader extends Loader {

	constructor( manager ) {

		super( manager );

	}

	load( url, onLoad, onProgress, onError ) {

		if ( this.path !== undefined ) url = this.path + url;

		url = this.manager.resolveURL( url );

		const scope = this;

		const cached = Cache.get( url );

		if ( cached !== undefined ) {

			scope.manager.itemStart( url );

			setTimeout( function () {

				if ( onLoad ) onLoad( cached );

				scope.manager.itemEnd( url );

			}, 0 );

			return cached;

		}

		const image = createElementNS( 'img' );

		function onImageLoad() {

			removeEventListeners();

			Cache.add( url, this );

			if ( onLoad ) onLoad( this );

			scope.manager.itemEnd( url );

		}

		function onImageError( event ) {

			removeEventListeners();

			if ( onError ) onError( event );

			scope.manager.itemError( url );
			scope.manager.itemEnd( url );

		}

		function removeEventListeners() {

			image.removeEventListener( 'load', onImageLoad, false );
			image.removeEventListener( 'error', onImageError, false );

		}

		image.addEventListener( 'load', onImageLoad, false );
		image.addEventListener( 'error', onImageError, false );

		if ( url.substr( 0, 5 ) !== 'data:' ) {

			if ( this.crossOrigin !== undefined ) image.crossOrigin = this.crossOrigin;

		}

		scope.manager.itemStart( url );

		image.src = url;

		return image;

	}

}

So I end up with the error

GET chrome-extension://jdgkbifmkkkcgglljmlojibojoafmlhi/texture_0.png net::ERR_FILE_NOT_FOUND

Is there a way to overwrite how urls get assigned to image.src? Similar to how you rewrite the fetch?
But even if there is a way, I wouldn’t be able to parse that url, because it has some weird random letters “chrome-extension://jdgkbifmkkkcgglljmlojibojoafmlhi/” , the locality of the file has been lost.

I am on Chrome 97 and the command line flag –allow-file-access-from-files still seems to be working quite happily. This allows me to have Three.js load local files without having to initiate a server.

2 Likes

The name of the file is always in the last field and I think that the path should always be the same as the .mtl file that calls for it

That is great. XMLHttpRequest doesn’t work on my Win10 desktop Chrome[97] any more. Modules never worked. I use Drag & Drop or File API to load locally.
There is another trick for loading local iles.
That is to convert em to Base64 or [object Object] and place em in an external JS file.
Whenever is needed just append mesh_data.js to DOM.

Is there any way to use the old way of loading without fetch() in the newer versions of three.js? Is it something I can build from source? If so, what parts are responsible for the loading?
I’m guessing it is the FileLoader part, but I’m wondering if reverting the change will break things.
btw, any tutorials on how to build from source as a module?

Tried updating from r133 to r134, however I now get errors when trying to load things. I assume it is due to this change: FileLoader now uses fetch instead of XMLHttpRequest.
It was working perfectly fine in r133.

I found a workaround! I took the FileLoader code from the 133 version and replaced the FileLoader code in the 134 version and it works now with the XMLHttpRequest. So now everything is loading great.

So basically I did a search for FileLoader in my three.module.js file and replaced the section with the 133 version.

Does that mean I have to use the r133 version every time? But I built it with vue3 vite, do I have to copy and paste it every time? So tired

I think so.