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.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/56124526/loading-local-files-into-a-babylonjs-scene-directly

标签

babylonjs