Having multiple 3D models on a single product breaks the model viewer

Solved
robatato
New Member
7 0 0

Hey there, I've uploaded 2 different 3D models for a product to show the different variants but unfortunately the model viewer for the 2nd 3D model doesn't load correctly and the customer is unable to interact with it. What is interesting is that if you do attempt to interact with the model by rotating it (visually it won't move) and you then click the fullscreen button in the viewer controls, it re-renders the model in the position it should have rotated to when the fullscreen view appears. The model will not rotate in fullscreen either but if you attempt to do so and then exit fullscreen, it will render as having moved. Essentially, the model viewer is working to some degree but the 2nd model is not being rendered correctly. Let me know if a link is needed to see this behavior or if you can simply test this on your end. This occurs while using a brand new updated version of the "Debut" Theme so it should be very simple to reproduce.

Thanks in advance for any help you can offer!

0 Likes
robatato
New Member
7 0 0

I thought I came to the right place since it's an official Shopify Theme. Really hoping to get to the bottom of this... Is there anybody out there?

0 Likes
tim
Shopify Expert
2857 117 937

I have not seen this in my test shop -- care to share a link to your store?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
robatato
New Member
7 0 0

Hey, so I'm working on a client's store and they aren't comfortable making any changes live if they aren't working correctly. I'm not sure how else to show you this issue but if you simply upload two models under the same product on the Debut Theme, you will be able to observe the second model viewer not working correctly. I am happy to capture and provide a video if it would help but seeing as this is a fresh download of the most released update, you should be able to reproduce it very easily. Please let me know if I'm talking crazy over here, I swear it's busted.

0 Likes
tim
Shopify Expert
2857 117 937

You can always share a preview link.

Here is my test shop preview link to a product with 3 models https://hc5bzt4p3z1ga4lf-11055070.shopifypreview.com/collections/all/products/a-free-test-product and it works fine for me.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
robatato
New Member
7 0 0

Okay, so that actually helped me figure out the issue. Thank you for sharing! The difference between your store and mine is that I set the model viewer's "reveal" attribute to reveal: 'auto' instead of 'interaction' so that the model gets loaded immediately without the customer having to select it. I am in the process of giving the models an animated spin that will autoplay as well so this is an important feature of the model-viewer that the theme apparently isn't cooperating with. For now, I've disabled the 'auto' attribute and set it back to 'interaction' as a workaround but this is not the ideal scenario.

Please try adjusting the attributes for the model viewer your media.liquid code and set reveal to auto and let me know if you experience this same issue. It is my personal opinion that all features of the model viewer should be fully functional with the theme but I also understand this is relatively new tech that Shopify has integrated so there will certainly be bumps along the way. Hopefully we can get a fix for this soon though! : )

 

EDIT: The relevant attribute: https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-reveal

0 Likes
tim
Shopify Expert
2857 117 937

This is an accepted solution.

Ok, I will have a further look at this later, here are my thoughts so far:

  • if the store is on paid plan already, reach out to Shopify support about their 60 free minutes of design changes and ask them to help;
  • try adding showPoster() and dismissPoster()  when switching media to setupModelViewerListeners function.
  • switched my test page to reveal='auto', seems to be ok still.
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
robatato
New Member
7 0 0

What?! Ok... so I AM crazy? Cool. Cool cool cool.

Here's a preview link to the store:

https://8p6r5166yeleob26-21674385.shopifypreview.com

Also! This is my media.liquid code.

{{ media | model_viewer_tag: image_size: image_size, reveal: 'auto', data-model-id: media.id, alt: '3D Render View', loading: 'eager', background-color: 'unset' }}

I will look into injecting the poster dismiss method and see how that plays out.

Thank you for the suggestions!

0 Likes
robatato
New Member
7 0 0

Okay so I got to the bottom of it at last. I am crazy! I forgot that I set loading to 'eager' so I sabotaged myself because deleting the attribute fixed the bug. That said, I have no idea why because it seems like the right value to set it to if you want the models to load instantly. Well anyway, thank you a ton for your help! I am just happy everything is working as expected now.

0 Likes