Loading local files into a Babylonjs scene directly

Question

Babaylonjs is able to load babylon, gltf, obj and files into a scene.

How to load a model, and its accompanying files like images for textures (or e.g. bin file for gltf, mtl file for obj), file selected from a file select dialog by an html input type=file? Note the accompanying files can be in arbitrary directories beside the main model file.

Note: Babylonjs Assets Manager and SceneLoader methods all http requests from a server. They are not what I look for. Also http posting a file to remote server then using babylonjs methods I have mentioned to http request and load into scene is not what am I looking for here.

This is an actual answer: https://stackoverflow.com/questions/69692470/how-to-combine-gltf-file-with-other-assets-bin-and-png-files-for-use-in-babylo/69894276#69894276 — arcman77, Nov 10 '21 at 02:54

score 4 · Answer 1 · answered May 17 '19 at 08:40

4

Okay have you tried this ?

You import your file by using an input file.
Then you get your file from the input const myFile = target.file[0]
Then you create an url with it and use this URL to import your object on the scene

   const url = URL.createObjectURL(myFile);
   BABYLON.SceneLoader.ImportMeshAsync(
           "",
           url,
           "",
           scene,
           null,
           fileExtension
       );

It enables you to use a an input file without knowing precisly where it is located in your computer and use the Babylon methods based on request to import it.

answered May 17 '19 at 08:40

nathanidp

99
2

Well I have just tried this a few hours ago. And it works. Docs should say the argument is of type dataUrl not File as it says. – sçuçu May 17 '19 at 09:05
True, happy to see you have found a way to resolve your issue – nathanidp May 17 '19 at 09:09
I will check your post more when have time and select as answer ir not. Maybe we add some alternatives as well. Thank you – sçuçu May 17 '19 at 09:13
What if I want to append (import) a `gltf`, or `obj` file which have other accompanying files (`.bin` and `.mtl`, respectively). They have references to other files and loaders tries to make http requests to load them too, but they are on my computer or `FileList` I have in browser from input `type=file` or even `type=directory`. – sçuçu Jul 03 '19 at 09:43

score 1 · Answer 2 · edited Jul 02 '19 at 17:54

I recommend you to check code of BabylonJS sandbox which supports model import from local file system: https://sandbox.babylonjs.com/

In this example you have two ways to import a local model to the scene:

drag model to the canvas
click on Upload button on the right bottom corner. File select dialog will be opened. You can choose multiple files

View 268-291 code lines of the script used in BabylonJS sandbox (https://sandbox.babylonjs.com/index.js):

filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded, null, null, null, startProcessingFiles, null, sceneError);
filesInput.onProcessFileCallback = (function(file, name, extension) {
    if (filesInput._filesToLoad && filesInput._filesToLoad.length === 1 && extension) {
        if (extension.toLowerCase() === "dds" || extension.toLowerCase() === "env") {
            BABYLON.FilesInput.FilesToLoad[name] = file;
            skyboxPath = "file:" + file.correctName;
            return false;
        }
    }
    return true;
}).bind(this);
filesInput.monitorElementForDragNDrop(canvas);

htmlInput.addEventListener('change', function(event) {
    // Handling data transfer via drag'n'drop
    if (event && event.dataTransfer && event.dataTransfer.files) {
        filesToLoad = event.dataTransfer.files;
    }
    // Handling files from input files
    if (event && event.target && event.target.files) {
        filesToLoad = event.target.files;
    }
    filesInput.loadFiles(event);
}, false);

As you can see there is used a BabylonJS class FilesInput. More info about FilesInput class: https://doc.babylonjs.com/api/classes/babylon.filesinput

Sandbox dails to load the model if the case is as in the question: The model has accompanying files in a folder next to it. — sçuçu, Jul 03 '19 at 09:48

Loading local files into a Babylonjs scene directly

2 Answers2

Linked