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

07.06.2021Рубрика: ВопросыАвтор: admin

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

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

Post Views: 81

См. также: Передовой опыт непрерывной интеграции VSTSDB: установка нашего интеграционного тестового SQL Server на том же компьютере, что и агент сборки TFS?

1 file html input javascript three.js

Комментарии: 1

Miger 07.06.2021 в 00:00
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-адрес даже после сбоя.
Ответить

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