ThreeJS Загрузить модель GLTF прямо из файла

Мне нужно загрузить любую модель 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 не может получить к нему доступ по некоторым причинам безопасности. Что с этим делать? Ничего из того, что я пробовал, пока не работает.

Как я могу отобразить модель прямо из выбранного файла во входном теге?

См. также:  Загрузка пакета приложения завершилась ошибкой: EISDIR: недопустимая операция в каталоге (Elastic Beanstalk развертывает VSTS)
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Miger

    GLTFLoader не принимает файлы, вам нужно передать URL-адрес.

    Вы можете создавать локальные временные URL-адреса из объектов File или Blob и передавать их следующим образом

    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-адрес даже после сбоя.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: