CODEWITHSUNDEEP
babylonjs
sçuçu
sçuçu

Reputation: 3070

Loading local files into a Babylonjs scene directly

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.

Upvotes: 2

Views: 7909

Answers (2)

julee
julee

Reputation: 71

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:

  1. drag model to the canvas
  2. 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

Upvotes: 1

nathanidp
nathanidp

Reputation: 99

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.

Upvotes: 4

Related Questions