Load fbx as blob (String)

loaders
geometry

#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:

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.

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

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: