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

Question

Babaylonjs 能够将 babylon、gltf、obj 和文件加载到场景中。

如何加载模型及其随附的文件，例如纹理图像（例如，bin 文件用于gltf，mtl 文件用于obj），通过 html 输入从文件选择对话框中选择的文件type=file?请注意，随附的文件可以位于主模型文件旁边的任意目录中。

注意：Babylonjs Assets Manager 和 SceneLoader 方法所有来自服务器的 http 请求。他们不是我要找的。此外，http 将文件发布到远程服务器然后使用我提到的 http 请求并加载到场景中的 babylonjs 方法不是我在这里寻找的。​​p>

Answer 1

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

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

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

查看 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

Answer 2

好的，你试过了吗？

• 您使用输入文件导入文件。
• 然后你从输入const myFile = target.file[0]得到你的文件
• 然后你用它创建一个 url 并使用这个 URL 在场景中导入你的对象

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

它使您能够使用输入文件而不知道它在您的计算机中的确切位置，并根据请求使用巴比伦方法来导入它。