Enable-pan and auto-rotate for 3D Model viewer

[Jordi3man]

Hi,

I have some 3D models loaded in my shop. They work fantastic but I don't understand how or where I can enable the ---> Enable-pan and auto-rotate   <----. The used <model-viewer>  only needs some extra parameters:   https://modelviewer.dev/examples/stagingandcameras/index.html#panning

Do I need to put them in the custom css of my dawn theme? Or should I put a metafield in the liquid code for the product? Any help would be great 

[LitExtension]

Hi @Jordi3man,

For the Dawn theme, you only need 3D models in the product image, it will display well.

Hope it helps!

[Jordi3man]

hi @LitExtension,

Thank you for you reply. The models are displayed will that's for sure. But I'm missing the panning feature. This can be simpled enabled with some code/words between the <model-viewer> tags. The only thing is that I don't know where to put it in the theme liquid code. To me it looks like the <model-viewer> is loaded as one module. 
I hope somebody can point me in the directs where I can modify /add the <model-viewer> code.

Thanks!

[LitExtension]

Hi @Jordi3man,

Do you want it to show in product images? Or will it be a separate section?

[Jordi3man]

Hi @LitExtension,
I pref to have it as product image. The 3D viewer is working perfect. But I like to activate some options that are quite common.

https://j-drieman.myshopify.com/admin/products/7308579930303 

[LitExtension]

Hi @Jordi3man,

Please send me the product link, I will check it for you

[Jordi3man]

thanks!

https://www.theshrinkfactory.com/products/195-1105-29-jordi

[LitExtension]

Hi @Jordi3man,

Please go to product-model.js file and add code here:

Code: this.loadContent();

Hope it helps!

[AmeriVacS]

Hi Lit Extension & Jordi3Man,

Thanks for this great thread! I'm trying to add panning to my 3D products too.  Can you please advise on if this solution worked for you? Specifically:

1) What text needs to be added to the js file and  (2) where. 

Here is the GLB file we are trying to add panning to: https://codepen.io/jorge-fco/full/vYRqYev

Here is the code we were trying to do so with: https://modelviewer.dev/examples/stagingandcameras/index.html#enableInteraction

Can you lend a hand?  Would be greatly appreciative!!!