AR is not working if script is delayed loaded

[wpsoul]

As model-viewer.js is extremelly big file, I need to delay loading and use something like

const modelViewerScript = document.createElement("script"); modelViewerScript.type = "module"; modelViewerScript.id = 'gsmodelviewerscript'; modelViewerScript.src = gs_model_params.pluginURL + "libs/modelviewer/model-viewer.min.js"; document.body.appendChild(modelViewerScript);

And everything is working great except AR. It's sometimes working in Safari but not in chrome. Is any way to refresh models after script is loaded?

[elalish]

We have some examples of how to do this: https://modelviewer.dev/examples/lighthouse.html

[wpsoul]

I use almost the same code and it doesn't work for me (works in safari, but not in chrome like your example)

Here is full code https://gist.github.com/wpsoul/fefe85f5b2cfb8d3493d24933dfa540f

And here is in HTML

https://gist.github.com/wpsoul/44fb4ccfab8cd5d428dcd732905cd008

Currently, it's not clear which condition model must have to enable AR. For me, it looks like a problem of priority or order.

Here is link to page

[elalish]

AR is working great on your page with Chrome on my Pixel 4a. Can I assume you've fixed it?

[wpsoul]

No, I didn't touch anything. And this is a problem, because sometimes it's working, then not working. I believe that problem is related to order of loading and/or Speed of script loading. Maybe, if script is loaded fast, then AR is enabled. So, I need some function to refresh model to prevent this bug

[elalish]

Interesting, can you make a consistent repro perhaps by adding some setTimeout functions to control the async order? AR is also working fine on our delayed script loading example: https://modelviewer.dev/examples/lighthouse.html

You might also want to look at the web's customElements API - you can listen for the MV script loading there.

[wpsoul]

setTimeout is first thing which is in mind. But I don't know how to refresh model. Usually, I have in libraries something like .refresh() or .update() but I can't find anything similar in model viewer

[elalish]

There shouldn't be any refreshing necessary. What we need is not to make it work, but to make it not work consistently - then we can diagnose the underlying bug.