How to fix interaction issues with custom 3D model on my website?

[hopeitsnotu]

Hello,

i have a unique 3D model design on the landing page of my website that users are able to explore and interact with. As shown in this preview link , users are able to "grab" and "spin" the 3D model. However, my issue lies that when the user tries to access the cart icon on the home page, the user cannot click any buttons inside the cart drawer because they are still able to interact with the model (see screenshot below). A similar, and more serious issue, arises on Mobile, where the users cannot interact with any of my menu items because the website still recognizes any movement or motion as interacting with the model (see screenshot below).

Can someone point me in the right direction with this issue? Please refer to my preview URL and thank you in advance

[oscprofessional · Accepted solution]

Hello, @hopeitsnotu 
Please Add This CSS Go to Online Store > edit theme > assets > base.css

.drawer.animate.active {
	z-index: 99999;
}
#MainContent {
	z-index: -999;
}

Like This

[hopeitsnotu]

I had to change the z-index for Main Contact to 0 instead of -999 in order for the customer to still interact with the 3d Model, but this workflow worked.

Thanks a lot

[oscprofessional]

@hopeitsnotu  Okay
I hope the solution is working
so if the solution its useful, please like
Thanks