Transparent background for website embed

1

Hello,

Currently, I am hosting Shapespark 3D scene in an iframe on my website. I wanted to ask if it’s possible to have the default Shapespark background be 100% transparent, so that it looks like the object is a part of my website design itself.

Can you please guide on how to achieve it, if it’s possible.

Thank you.

2

@jan and @wojtek , is this possible ?

3

Try adding the following style to the body-end.html file:

<style>
  #cover-image {
    opacity: 0;
  }
</style>

It should make the initial background image transparent, but once the scene is loaded this background image is no longer used and the rendered 3D view will not have any transparency.

4

Yes, I understand. I already made the cover image transparent and have done a workaround to have the transparent effect to the 3D view as well. Thanks for your help !

5

Hi, interesting idea, can you show some pics of your scene within the webpage and the workaround (code). Thanks.

6

Hello @TomasP ,

The workaround was that I created a sky texture of the exact same color as of my website background. It gives an effect that my model is placed on my website without any iframe, border and is visually appealing.

I’m sorry that I can’t share my website as it’s currently in a protected environment.

I hope this simple idea benefits all Shapespark users.