ThreeJS直接从文件输入加载GLTF Model

Question

我需要在用户想要显示的 ThreeJS 中加载任何 GLTF Model。 这意味着我有一个文件输入标签，用户可以在其中单击，然后从他的文件浏览器中选择他想要上传的 gltf 文件：

<input id="selectedModel" type="file">

一旦用户选择了 model 我想直接使用该文件并在 ThreeJS 中显示它，问题是我不知道如何使用 bat 选择的文件，而无需先将其保存在服务器上。

我试过这样做：

const uploadedFile = document.getElementById("selectedModel").files[0]

loadGLTF( uploadedFile , function ( gltf ) {        
    model = gltf.scene      
})

然而，这给了我一个错误：

url.lastIndexOf is not a function

我也尝试过document.getElementById("selectedModel").value但这给了我一个假路径，并且出于某些安全原因fakepath无法访问它。 有什么办法解决这个问题？ 到目前为止，我没有尝试过任何工作。

如何直接从输入标签中的选定文件中显示 model？

Answer 1

GLTFLoader 不接受文件，需要传入一个 URL。

您可以从File或Blob对象创建本地临时 URL，并像这样传递它们

const uploadedFile = document.getElementById("selectedModel").files[0]
const url = URL.createObjectURL(uploadedFile);
loadGLTF( url, function ( gltf ) {        
    model = gltf.scene;
    URL.revokeObjectURL(url);
}, function (){  }, function (){ 
    URL.revokeObjectURL(url);
});

假设loadGLTF与GLTFLoader.load()相同。 第二个回调用于进度，第三个用于错误。 即使发生故障，也要确保撤销 URL。