Load fbx as blob (String)

Questions
,
1

Hi @all,

This is my first contribution here. I need help importing fbx files as blob data. I have a test file stored in my backend database and want to import it after executing a get request. My code looks like this:

...
request.onload = function() {
var result = JSON.parse(this.response);
loadModels(result);
};

request.send();

function loadModels(fileBase64) {
let file = atob(fileBase64.fileValue);
console.log(file);
var loader = new THREE.FBXLoader();

 loader.load(file, function(object) {
        scene.add(object);
      });
    }

here is my console output:
Capture2

The Fbx file looks like it was opened with Notepad. Is there a function like this? -->
var object = loader.parse(file)
scene.add(object)

loader.load() consumes only urls.

greetings

2

If you have a Blob, try using var url = URL.createObjectURL( blob ) to create a URL for the in-memory asset.

3

The function doesn’t accept my file.
→ TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL.
strangely enough the function works in my angular frontend, but not in the threejs component. It’s an interesting function in general, but not the solution to my problem. :frowning:

isn’t there a function of the fbx loader that can parse the fbx directly without needing a path or URL?

4

It sounds like the value is not a Blob. I’m using this myself on http://gltf-viewer.donmccurdy.com/ to load files that are drag-and-dropped, and I think the editor does the same, so assuming you can get a File or Blob instance it will work.

isn’t there a function of the fbx loader that can parse the fbx directly without needing a path or URL?

Yes, as you suggest it’s object = loader.parse( buffer, path ). If the model has no external resources, path can just be an empty string. Note that the buffer must be an ArrayBuffer instance, so if you have string data (not a Data URI) you want to use buffer = new TextEncoder().encode( text )

5

Good morning :slight_smile:

I’m one step further but it still doesn’t work. The converting to an ArrayBuffer was definitely a step I missed. Now at least the FBX version is already recognized. however the process fails.

Capture2
Capture21928×472 30.7 KB

What exactly does property type mean?

I already tested all files with loader.load(url, function(object) and the fbx files are fine.
This is my function:

function loadModel(fileBase64) {
 
  let file = atob(fileBase64.fileValue);

  buffer = new TextEncoder().encode(file);

  var loader = new THREE.FBXLoader();
  var object = loader.parse(buffer.buffer, "");
  scene.add(object);
}
6

Update:

I tested loader.parse with a local file → ./models/test.FBX

request.open(
  "GET",
  "./models/test.FBX",
  true
);

request.onload = function() {
  loadModel(this.response);
};

request.send();

function loadModel(file) {
  console.log(file)

  buffer = new TextEncoder().encode(file);
  console.log(buffer)

  var loader = new THREE.FBXLoader();
  var object = loader.parse(buffer.buffer, "");
  scene.add(object);
}

same Problem

Capture2
Capture21929×508 33.8 KB

When I use loader.load it works.:

 var loader = new THREE.FBXLoader();
    loader.load("./models/test.FBX", function(object) {  
        scene.add(object);
})

An example could be helpful :slight_smile:

7

Hi all!

I’m dealing with a similar issue. The FBX loader takes the full URL to a file but what I’m trying to do is to download a file from a server and preview it. I do have the URL to the server but once I enter it the file automatically starts downloading, i.e., you can’t just type something like /path/to/server/file.fbx into the loader function because it doesn’t work.

Instead, if I do something like alert(/path/to/server) the file starts downloading. I did try var url = URL.createObjectURL( blob ) but I get the error: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Sorry, but I’m completely new to JavaScript and three.js. Thanks!

8

i.e., you can’t just type something like /path/to/server/file.fbx into the loader function because it doesn’t work.

It sounds like your server might not have CORS configured correctly? The same URL you use to download a file should also work to load it with FBXLoader, and if not you would probably need to share the specific error you are seeing in the JS console.

If you would rather download the file separately (e.g. with the JS fetch() API) then you can also pass already-downloaded data into the loader.parse(...) function.

9

For the moment, I’m running on a local server that is set up using Docker containers. I did try the URL directly in the loader but nothing happens. The address looks like this /files/602110ccae8c9f9d681eef3d/blob, so that’s why I searched to see what a blob file is.

If I navigate to the above URL in my localhost: http://localhost:9000/files/602110ccae8c9f9d681eef3d/blob, the file starts downloading. So the question is, how do you provide a URL to the loader?

If I give it the URL /files/602110ccae8c9f9d681eef3d/blob/file.fbx, nothing happens and I get the error: VM1471:2 GET http://localhost:9000/files/602110ccae8c9f9d681eef3d/blob/Thriller_Part_3.fbx 404 (Not Found). i will try your parse suggestion but I’m not familiar with it.

10

Thank you so much btw!

11

If I navigate to the above URL in my localhost …, the file starts downloading. So the question is, how do you provide a URL to the loader?

The fact that the file starts downloading when you visit its URL is normal, and not a concern. The browser does this for many file types. This is probably the same URL you should be providing to your loader — if the file did not start downloading when you visited its URL, that would indicate a problem.

12

OK, something unexpected worked! I did loader.SetPath(url) and then loader.load('', ..), i.e., empty string! And it worked like a charm :slightly_smiling_face: Thanks!

1 Like