Use ar only (load model but without displaying it on the browser)

[uprealdigital]

Hi!

I'm using three.js for the viewer in the browser but I want to use the Modelviewer to view the model in AR.

How can I only use the AR feature of the model viewer without displaying/impacting the browser view?

Right now, if the model viewer property reveal is set to "manual". It only loads the model when I trigger:
modelViewer.dismissPoster();

But then it will show the model in the webpage.

So what I did was register to the "poster-dismissed" event and I trigger:
modelViewer.showPoster();

That's hides the model again which is what I want.

BUT, now I can't go back to the AR mode for some reason.

Am I making this too complicated for no reason? Is there a better way to do this?

[uprealdigital]

I just realized why I can't go back to the AR mode. Fixing this right. Will let you know what I did, hopefully, that will do it.

[elalish]

Since model-viewer is based on three.js, you'll probably have a much easier time using only model-viewer (less code to maintain, fewer copies of three.js for users to download). Is there any feature you're using in three.js that model-viewer does not expose?

You can set the MV element to display: none or size 0x0, then hook up your own AR button to canActivateAR and activateAR(): https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-properties-canActivateAR

[uprealdigital]

Hey @elalish ,

Thanks for the swift reply!

I was able to solve my issue where it wasn't loading the AR mode on the second try.
(I check if the model is loaded, and if it is, I just launch the AR mode otherwise I trigger dismissPoster() method to load the model)

The only downside I have found so far of using the model viewer is that I have to load the model twice. (would be great to pass an existing model that was loading to the model viewer but maybe I'm asking for too much)

But your comment raised a concern for me about loading the three.js library twice.
Is there a way to use the model viewer + native three.js without importing the library twice?

To answer your question, I'm building a web configurator so the plan is to load more than one 3D model so that's why I went for three.js instead of the model viewer.

And since the model viewer already takes care of the AR part, I thought about using the model viewer instead of building the AR part from scratch with three.js.

[elalish]

Fair enough, one of these days I'm going to write a multi-model API. You can reuse three.js if you work in TS, building our library and your own code at once. Otherwise, we may have a simple JS bundle approach coming soon, see #3948.

[russkiimike]

Hey @elalish I am in a similar situation as the OP. I am looking to trigger AR through model viewer but otherwise use Three.js, I would model-viewer only but I haven't figured out a way to load external animations on to a base model like in Three.js. Any ideas ?

[elalish]

If you're considering using Three.js anyway, it might be easier to fork us and add the relevant code into our Three.js Scene. Unless you mean animated textures, in which case we have that API: https://modelviewer.dev/examples/scenegraph/#animatedTexturesExample