Мне нужно загрузить любую модель GLTF в ThreeJS, которую пользователь хочет отобразить. Это означает, что у меня есть поле ввода файла, где пользователь может щелкнуть, а затем выбрать gltf-файл, который он хочет загрузить из своего файлового браузера:
<input id="selectedModel" type="file">
Как только пользователь выбрал модель, я хочу использовать файл напрямую и отобразить его в ThreeJS, проблема в том, что я не знаю, как я могу использовать выбранный файл прямо на лету, не сохраняя его предварительно на сервере.
Я пробовал сделать это так:
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
, и ThreeJS не может получить к нему доступ по некоторым причинам безопасности. Что с этим делать? Ничего из того, что я пробовал, пока не работает.
Как я могу отобразить модель прямо из выбранного файла во входном теге?
GLTFLoader не принимает файлы, вам нужно передать URL-адрес.
Вы можете создавать локальные временные URL-адреса из объектов
File
илиBlob
и передавать их следующим образомПредполагая, что
loadGLTF
совпадает сGLTFLoader.load()
. Второй обратный вызов — для прогресса, третий — для ошибки. Не забудьте отозвать URL-адрес даже после сбоя.