Passing a GLB model from three.js to Model-Viewer (AR scene)

Questions
,
1

I am trying to generate a glTF file from a custom 3D glTF configurator I am building and pass it to an AR web viewer. I pass the Blob created to the src of the Model-viewer - this works for iOS quick-look fine, however Androids Scene-Viewer either crashes or says it couldn’t load the object. WebXR sometimes works but is unusable running at about a frame a minute!
Can you pass a blob to Scene Viewer or is this not allowed?
Below is how I create the src, any help would be great, thank you.

  function AR() {
        let modelViewer = document.getElementById("ar-viewer");

        var exporter = new THREE.GLTFExporter();
        exporter.parse(group, function (gltf) {
            console.log("GLTF: " + gltf);
            var Url = saveArrayBuffer(gltf, 'scene.glb');
            console.log("URL: " + Url);
            modelViewer.setAttribute("src", Url);
            //   setTimeout(URL.revokeObjectURL(Url), 10000);
            setTimeout(() => { URL.revokeObjectURL(Url) }, 3000);

        }, { binary: true });

    }

    function saveArrayBuffer(buffer, filename) {
        const blob = new Blob([buffer], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        return url;
    }```
1 Like
2

@Zack-Arc I’ve run into this issue as well. Did you find a solution?
If I do, I’ll be sure to give you an update :slight_smile:

3

I had to solve this today and ended up saving the model to server and loading it again. Works for Android and iOS from a single .glb, although iOS users have to be using Safari (not Chrome) for some reason.

The advantage of this is that you can provide a QR code link, for anyone on desktop, so they encouraged to open on their mobile. Would still be nice to view on the device you created the geometry on, without the round trip…

4

Unfortunately, I never found a complete solution just a workaround, much like yourself.
I continued to just pass a blob or provide a QR link. Blobs aren’t compatible with Scene Viewer so just forced it to load WebXR or quick-look.
However, the QR workaround is not perfect.

5

Did you get iOS to open a dynamicly made USDZ? Without going via the server?

6

I haven’t had any problems with generating USDZ files that launch as AR QuickLook - do note that for immediate preview, a couple things do need to be in place: The <a> tag needs to have rel="ar", and there needs to be an image inside it (that theoretically shows the user a thumbnail/preview of the experience). I just verified that this example still functions:

2 Likes
7

Cheers! @Zachernuk

I’m getting mixed results, so it must be something to do with different models (max size??)
But when I upload and link back they always work. Bit frustrating.

8

Running into similar issues…I myself have resulted in the ‘upload to server’ option, my issue is webxr works fine but scene viewer seems to have some faces on the model missing?

Will be testing iPhone tonight

‘my god why can they not all just use webxr :sob:’

9

Recently I have updated my iOS / Safari to the newest version and my workaround has unfortunately stopped working (passing it through a blob and dynamically creating a USDZ). Does your server-side workaround still work?

10

The tag ar-scale=“fixed” in my model-viewer seems to have been the issue if anyone is stuck

11

What about using a service worker, to avoid the round trip to the server? The downside is that the user needs to reload the page to turn on the service-worker, but this hack short-circuit would still be better than sending bytes to the server and back.

I’m going to try that, but thought I’d post here first to see if anyone has tried it already.

12

How did the service worker attempt work out for you? Is anyone having success passing dynamic models to model-viewer in 2024?