Meta Quest Browser file input fails with some file extensions
While developing a web app with three.js, I noticed an unexpected behavior of Meta Quest Browser:
- if I choose a .glb model file with a <input type="file"> tag, and try to access it in javascript, the browser does not allow access to the file
- if I manually change the extension to .png, it works.
Disabling safe navigation in browser's settings does not solve the problem.
The problem occur only on Meta Quest Browser: Chrome on Windows and Android behave as expected.
This is the code handling file input:
const fileInput = document.getElementById('file') as HTMLInputElement
fileInput.addEventListener('change', (e) => loadModel((e.target as HTMLInputElement).files![0]))
function loadModel(file: File) {
const url = URL.createObjectURL(file)
const loader = new GLTFLoader()
loader.load( url, function ( gltf ) {
scene.add( gltf.scene );
console.log('Model loaded')
}, undefined, function ( error ) {
console.error( error );
} );
}
And this is the console error I get when accessing file with .glb extension
GET blob:https://192.168.1.161:5500/83bfd355-2cf6-4714-bda7-3c6cf3331c58
net::ERR_ACCESS_DENIED 200 (OK)
load @ three.module.js:41933
load @ GLTFLoader.js:222
loadModel @ index.ts:58
(anonymous) @ index.ts:52
Uncaught (in promise) TypeError: network error
Promise.then (async)
readData @ three.module.js:41973
start @ three.module.js:41969
(anonymous) @ three.module.js:41966
Promise.then (async)
load @ three.module.js:41934
load @ GLTFLoader.js:222
loadModel @ index.ts:58
(anonymous) @ index.ts:52
I set up a sample web app to reproduce the problem:
https://fornaeffe.github.io/vr-playground/
source code here:
https://github.com/fornaeffe/vr-playground/tree/visorr-upload-bug
Other details of the problem explained here: https://stackoverflow.com/questions/77068404/model-loaders-work-in-chrome-but-not-in-meta-quest-2-browser-when-using-file-in
and here: https://discourse.threejs.org/t/gltfloader-works-in-chrome-but-not-in-meta-quest-2-browser/55803
