Need Help to Set Transparent Background - Sketchfab Viewer

animation

(Jasonwalter) #1

Hello,

I’m currently developing a UI using the sketchfab API utility shown here https://www.creativesystems.com/playground-toolkit/

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.

-Jason Walter


(Paul Sketch) #2

Could you provide a direct link on where to look for the sketchfab embed on https://www.creativesystems.com/playground-toolkit/ ?

(and/or where to click to make it appear)


#3

You should just use the embed parameter to make the viewer transparent, not try to edit the viewer’s CSS. You indeed should not be allowed to target it directly due to CORS.

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