How to change the default white background to transparent in the 3D viewer

[ferb7nft]

My model-viewer 3D previewer always has a white background for any 3D model I use. I tried using a skybox image of another solid color, setting background-color = transparent, --poster-color transparent, but it is still always white. Does anyone know how to fix this in the html/css? Maybe wrap it in a container and edit the container css instead of the model-viewer? Thank you!

<model-viewer src="file.glb" ios-src="file.usdz" ar-modes="webxr scene-viewer quick-look" camera-controls loading="eager" auto-rotate auto-rotate-delay="0" shadow-intensity="0" ar interaction-policy="always-allow" interaction-prompt-threshold="0" interaction-prompt-style="wiggle">

model-viewer { min-height: 50px; height: 80%; width: 90%; position: fixed; padding: 60px; align-items: center; text-align: center; justify-content: center; display: flex; }

[elalish]

You mention --poster-color transparent, but I don't see it in your example CSS. Have you tried --poster-color: #ffffff00 in your model-viewer CSS?

Also, even if transparent, it'll still be white if nothing is behind it. Can you post a live link or Glitch or something so we can see your whole page in action?

[ferb7nft]

Ok I will try the poster colour^ and I do have a background page colour that it is not showing. I will post an example page soon to show

[ferb7nft]

Here is the website and code:

https://ipfs.io/ipfs/QmPLG92kQuXjGVuv74gbuXpfoxiBAuzmmfAaNGe9cBcZt4/

index.txt

[ferb7nft]

And this website and code also does not work

[ferb7nft]

The problem was an outdated api version. It was fixed by using <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>