tag and GLTF loader, it works as expected on Chrome on Windows and Android, but does not work on Met" /> tag and GLTF loader, it works as expected on Chrome on Windows and Android, but does not work on Met" /> tag and GLTF loader, it works as expected on Chrome on Windows and Android, but does not work on Met"/>

Model loaders work in Chrome but not in Meta Quest 2 Browser, when using file input tag

71 Views Asked by At

If I upload a .glb model with <input type="file"> tag and GLTF loader, it works as expected on Chrome on Windows and Android, but does not work on Meta Quest 2 Browser.

This is the code part that handles model loading:

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 );

    } );
}

When I choose the .glb file on Meta Quest 2 Browser, on the console I get:

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

Request details:

User-Agent:
Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/29.0.0.3.52.509692587 SamsungBrowser/4.0 Chrome/116.0.5845.114 VR Safari/537.36

Request URL:
blob:https://192.168.1.161:5500/83bfd355-2cf6-4714-bda7-3c6cf3331c58
Request Method:
GET
Status Code:
200 OK
Referrer Policy:
strict-origin-when-cross-origin

I recreated the problem in a sample web app here:

https://fornaeffe.github.io/vr-playground/

source code here:

https://github.com/fornaeffe/vr-playground/tree/visorr-upload-bug

  • GLTF loader works as expected also on Meta Quest 2 Browser if it loads a model from the server, it fails only when loading a model though input tag.
  • OBJ loader behaves in the same way (ok on Chrome, fails in Meta Quest 2
  • Texture loader do well both on Windows and Meta Quest 2 Browser even from file input tag.

I resumed the test I did in this table:

Chrome on Windows Chrome on Android Browser on Meta Quest 2
Texture loader from server OK OK OK
Texture loader from file input tag OK OK OK
GLTF loader from server OK not tried OK
GLTF loader from file input tag OK OK FAILS!
OBJ loader from file input tag OK not tried FAILS!

I’m using three.js version 0.156

Anyone knows how to solve the problem?

Thank you!

Update:

This seems a Meta Quest 2 Browser bug: I tried changing manually the extension of the model file from .glb to .png, and the model loads correctly!

0

There are 0 best solutions below