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

Technical Q&A
1

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

2

Hi @Jordi3man ,

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

Hope it helps!

3

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 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 is loaded as one module.
I hope somebody can point me in the directs where I can modify /add the code.

Thanks!

4

Hi @Jordi3man ,

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

5

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

6

Hi @Jordi3man ,

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

7

thanks!

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

8

Hi @Jordi3man ,

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

Screenshot.png
Screenshot.png1006×523 20.8 KB

Code: this.loadContent();

Hope it helps!

9

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!!!