Loading assets directly from passed files

[nikita]

Hi,
I was working with loading external meshes/scenes through assetmanager or sceneloader methods of babylonjs.

I wanted to ask if there is a feature also to load meshes directly from preloaded files, like currently i need to provide a local URL of the file (stored on my machine) and file name. But what if a user uploads a glb file and I want to just pass the file directly to babylon instead of storing it at a local storage and passing the location.

 

 

[SpaceToast]

Hi Nikita,

EDIT: I was wrong! See below. BJS does indeed provide an easier method.

This should be quite doable (I believe the Playground performs a similar trick.) but Babylon doesn't provide a method by itself.

Mine the code in these examples to upload the file to browser memory. You may then need to call window.URL.createObjectURL() on the uploaded file to attach it (invisibly) to the DOM first. After that, you can pass the object URL the browser generates to the AssetManager as the rootUrl for Append() or AppendAsync() -- the sceneFilename property can be ignored.

Sorry I'm not at a machine I can test this on, but I think the above will work. Let me know!

Edited August 30, 2018 by SpaceToast

[Guest]

Babylon also provides the FilesInput class to help with user file loading or drag and drop. Here is an example within the sandbox: https://github.com/BabylonJS/Babylon.js/blob/master/sandbox/index.js#L244

[aWeirdo]

You can use HTML file input aswell: http://playground.babylonjs.com/#AUMFZT#2

Edit; updated link, wrong version.

[nikita]

I think I should have directly explained what my project is about, apologies.

I am creating a tool in typescript, where user can upload multiple mesh files and the tool will download a csv which contains a matrix for number of indices, vertices, sub meshes  etc (later will be extended).

I am initializing a null engine for this. the html input element will pass on the updated files. Then it will load mesh files one by one and calculate the complexity parameters of each and fill the matrix and download the csv.

 

So according to the above answers, 

I used URL.createObjectURL(file) with SceneLoader.ImportMesh and also with assetManager, but browser throws: Unable to find a plugin to load  files. Trying to use .babylon default plugin.

but when I use same techniques with local url (folder path eg. "./assets/"), it works fine.

 

Here is what I did for local files:

let meshTask: BABYLON.MeshAssetTask = this.assetsManager.addMeshTask(meshFile.name + "MeshTask", "", "./assets/", meshFile.name);

 

        meshTask.onSuccess = (task) => {

            task.loadedMeshes.forEach((loadedMesh) => {

                vertices += loadedMesh.getTotalVertices();

                indices += loadedMesh.getIndices().length;

                subMeshes++;

            });

            meshInfoT = new MeshInfo(meshFile.name, vertices, indices, subMeshes);

            this.meshInfoArray.push(meshInfoT);

        };

 

        meshTask.onError = (_, message, exception) => {

            console.error("Error loading mesh " + meshFile.name + "\nMessage: " + message + "\nException: " + exception);

        };

 

Do suggest me if there are any other techniques where I can get mesh information for multiple files without actually loading them on scene.

 

Thanks.

 

[Guest]

You did well, but as you are now using an object url you have to specify which extension to use: http://doc.babylonjs.com/api/classes/babylon.sceneloader#importmesh (the pluginExtension property which should be set to ".glb")