Set Transparent Background - Sketchfab Viewer


(Lukasrad) #1

Hello,

I’m currently developing a UI using the sketchfab API utility shown here https://www.bciburke.com/color-picker/color-picker-2

I’m having some trouble setting the background to be transparent. I’ve seen on other sites such as https://www.termaheat.pl/grzejnik/bart (scroll about halfway down the page and click the 3d tab to load the model) where the .viewer class in the iframe has a transparent background set via the embed css
.viewer.transparent { background: rgba(0, 0, 0, 0) !important; }

where on my example the .viewer class has this style applied to it
.viewer.transparent-pattern {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(45deg, rgb(204, 204, 204) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0)
75%, rgb(204, 204, 204) 75%, rgb(204, 204, 204)), linear-gradient(45deg, rgb(204, 204, 204) 25%,
rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgb(204, 204, 204) 75%, rgb(204, 204, 204));
background-position: 0 0, 4px 4px;
background-size: 8px 8px;
}

I’m not sure how this is achieved because I have the model background turned off in sketch fab which gives it the transparency image instead of no background at all. I can’t target this with JS as it’s blocked due to the CORS policy. Any help would be greatly appreciated.

-Lukas


#2

You can just add the transparent URL parameter during client.init rather than setting it to No Background in 3D Settings.

https://help.sketchfab.com/hc/en-us/articles/203509907-Embed-Models#embed-options


(Lukasrad) #3

Ah, it’s always the simple things… Thanks for your help James.