Loading local glb file using HTML Browse File button via the AssetManager ?[Playground link inside]

Questions
1

https://playground.babylonjs.com/#SA6QBM

The playground is what I came up with after browsing the forums and whatnot. Most examples are from old forum posts like these :

1)Loading assets directly from passed files - Questions & Answers - HTML5 Game Devs Forum
2)Importing OBJ files directly from computer? - Questions & Answers - HTML5 Game Devs Forum

Probably I could copy paste the way they do it but I’m kinda stubborn and want to see it work with the asset manager and I got somewhat lost.

Probably it’s my inexperience with how async, model loading, DOM or whatever works but I really need to do this.

I feel like I’m close but I’m so confused about the correct url of the file when it’s loaded into the browser. This is the main part of the file.

let  assetsManager = new BABYLON.AssetsManager(scene);  

var loadButton = document.getElementById('loadFile');

loadButton.onchange = function(){

    var file = this.files[0];

    var nameOfFile = file.name;

    var url = URL.createObjectURL(this.files[0]);

    

    assetsManager.addMeshTask("task1", "", url.substring("blob:".length)+"/" , file.name);

    assetsManager.load();

};

This gives me the following after I select the file using the button :

Failed to load resource: the server responded with a status of 404 (Not Found) [http://localhost:8080/db714f6b-c1e8-425e-916f-00872062066d/Chair3.glb]

P.S. The html button is there :

image
image1548×287 22.2 KB

2

Hmm I was looking for a solution, but now I am stuck too with this:

https://playground.babylonjs.com/#SA6QBM#1

With .glb files I get "Error: “Unexpected magic: 1852139298”
And with .babylon files I get "SyntaxError: “JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 10 of the JSON data”

1 Like
3

Yeah I hope something comes out of it cause I got really lost on what is the supposed workflow of this. Probably I am missing a piece of the puzzle.

Thanks for chiming in to help though my friend, really appreciated.

1 Like
4

https://playground.babylonjs.com/#SA6QBM#2 :wink:

3 Likes
5

@MarianG wow god job and thanks! :blush:

Ok so using the FileReader was the wrong track I guess…
Could you give me some hints what the

BABYLON.FilesInput.FilesToLoad[filename] = blob;

does and why it’s enough to just pass ‘file:’ as argument for rootURL in the addMeshTask()-method? :sweat_smile: :nerd_face:

6

Amazing ! Thank you sooooo much.

There is a problem though now. .babylon files load correctly both in playground and in my local server that I start using npm.

I can’t load a glb file though for some reason both in playground and in my local machine. I get a
Not allowed to load local resource: file://chair3.glb/

I thought that I was missing the import "@babylonjs/loaders/glTF"; but I have it there and still.

You are still a God to me though. :pray::clap::pray:

[EDIT] I converted the Chair3.glb file into Chair3.babylon file and for some reason I still get the same error about not being able to load local resource and the same Chair3.babylon doesn’t work in the playground too. I think there is something with the file itself.

  1. Chair3.babylon : https://drive.google.com/open?id=1KhoeuWKVFJaKvYIlixTNFicgXJtvX5cQ
  2. Chair3.glb : https://drive.google.com/open?id=1pxT7f85UcbYz2vF44u-aDHcPLA5qf-cg

The candle.babylon file loads correctly for example both local and in the playground. I tried Boombox.glb in playground and it doesn’t work too ! Giving me this :

task failed Unable to import meshes from file:BoomBox.glb: Error status: 0 - Unable to load file:BoomBox.glb RequestFileError: Error status: 0 - Unable to load file:BoomBox.glb at t [as constructor] (https://preview.babylonjs.com/babylon.js:16:577984) at new t (https://preview.babylonjs.com/babylon.js:16:578378) at XMLHttpRequest.g (https://preview.babylonjs.com/babylon.js:16:582206)

[EDIT2] Also Rabbit.babylon doesn’t work too and others. I’m really confused about this !:nauseated_face:

[EDIT3] It seems that the problem is only when the filename starts with an upper case letter.. Everything seems to work correctly with .babylon and .glb files. :rofl:Feeling so stupid now.

7 
  assetsManager.addMeshTask(file.name, "", "file:", file) try this and check.
8

Uhm is your syntax correct ? Cause I tried it and I get errors.

Your input is invaluable nonetheless !

[EDIT] I know it’s a bit hacky but I just turn all letters to lowercase upon load for now :

`loadButton.onchange = function(evt){

var files = evt.target.files;

var filename = files[0].name;

var filenameLowercase = filename.toLowerCase();



var blob = new Blob([files[0]]);

BABYLON.FilesInput.FilesToLoad[filenameLowercase] = blob;



assetsManager.addMeshTask("task1", "", "file:", filenameLowercase);    

assetsManager.load();};`

[EDIT 2 ] I’m thinking that it’s because keys aren’t supposed to be uppercase at all.

static readonly FilesToLoad: { [key: string]: File; };

But am I messing in this case for not using properly the method or is it a bug ?