Expect the color of background of poster is transparent, but can't set the posterColor

[Jerry202027]

I just follow the doc to implement 3D model in flutter web. Because the file size of my model is too big, it takes sometime to load. Therefore, I use poster to cover when loading the model.

However, even though I'm pretty sure that I remove the background of poster png, and set the posterColor transparent, the background of poster is still white.

Here is my code.

  ModelViewer(
                src:
                    "https://storage.googleapis.com/myModel.glb",
                alt:"3d model",
                ar: false,
                autoRotate: false,
                cameraControls: true,
                backgroundColor: Colors.transparent,
                autoPlay: true,
                poster:
                    "removebackground.png",
                posterColor: Colors.transparent,
                loading: Loading.eager,
                seamlessPoster: true,
              ),

The background of 3d model is transparent, so I need to set the background of poster transparent.

I use

• IOS to develop
• [model_viewer_plus Version: 1.3.1
• Browser: chrome

thanks for any help.

[Foldblade]

When I upgrade the <model-viewer> version from 1.11.0 to 1.12.0, I didn't notice the changes: it seems that both poster-color and seamless-poster are disappeared from the <model-viewer>'s document. (The section, Loading - CSS, is gone😵)

After a quick search, I found a solution here. Your issue may be solved by adding CSS:

ModelViewer(
            ar: false,
            autoRotate: false,
            cameraControls: true,
            backgroundColor: Colors.transparent,
            autoPlay: true,
            poster:
                'https://storage.googleapis.com/cms-storage-bucket/50c707a80fe015e19d39.png',
            // posterColor: Colors
            //     .transparent, // not found in model-viewr 1.12.0's documentation
            // seamlessPoster: true,  // not found in model-viewr 1.12.0's documentation
            loading: Loading.eager,
            src: 'assets/Astronaut.glb', // a bundled asset file
            alt: "A 3D model of an astronaut",
            relatedCss: '''
model-viewer {
    --poster-color: rgba(255, 255, 255, 0);
  }
''',
          ),

It may still take me a long period of time to read <model-viewer>'s document carefully and make some updates on model_viewer_plus...😥 Please have a try and let me know if this helps, and this issue can be kept open in order to remind me.

[Jerry202027]

OMG, just like you said, it worked!!! thanks for the help, really appreciate!