Question

Babaylonjs能够将巴比伦，gltf，obj和文件加载到场景中。

如何通过html输入类型文件从文件选择对话框中选择文件，以及如何加载模型和图像的纹理？

注意：Babylonjs资产管理器和SceneLoader方法会处理来自服务器的所有http请求。他们不是我想要的。同样，http在远程服务器上发布文件，然后使用我提到的http请求并加载到场景中的babylonjs方法，在这里我不是要寻找的。

Answer 1

好吧，您尝试过吗？

您使用输入文件导入文件。
然后您从输入const myFile = target.file[0]中获取文件
然后使用它创建一个URL，并使用该URL将对象导入场景中

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

它使您可以使用输入文件而不必精确地知道它在计算机中的位置，并根据请求使用巴比伦方法将其导入。

Answer 2

我建议您检查支持从本地文件系统导入模型的BabylonJS沙箱的代码：https://sandbox.babylonjs.com/

在此示例中，您有两种将本地模型导入场景的方法：

将模型拖到画布上
单击右下角的上载按钮。文件选择对话框将打开。您可以选择多个文件

查看BabylonJS沙箱（https://sandbox.babylonjs.com/index.js）中使用的脚本的268-291行代码：

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);

如您所见，使用了一个BabylonJS类FilesInput。有关FilesInput类的更多信息：https://doc.babylonjs.com/api/classes/babylon.filesinput

直接将本地文件加载到Babylonjs场景中

2 个答案: