How to make the background transparent？

[chuxinhao]

• I want to publish the model-only Web, nested within other sites.
  I’ve set up the camera and transparen Canvas, but why show the background?
  
  
  
  

https://playcanvas.com/project/691572/overview/transparentcanvas

[Leonidas]

Hi @chuxinhao,

I think you did everything right, it just seems something has changed in the Playcanvas engine. As a temporary fix try setting the camera’s clear color to full black together with 0 alpha:

[chuxinhao]

• I did what you said, but it still doesn’t work.

• I want this transparency on the left

[Leonidas]

I’ve forked your project and transparency works. The cube rests on top of the body element and whatever background color that is.

I think your issue is that you are putting in the iframe the Playcanvas build that uses the Playcanvas launcher iframe? If that is the case you need to grab the direct url to the app:

For example in your latest build that would be: https://playcanv.as/index/6GYPyCQ4

[chuxinhao]

I wrote it this way, I don’t know if that’s true, but it’s still not transparent

[Leonidas]

If you are using the Playcanvas build on top of another webpage then you need to make sure that both the html and body elements in that build have their background-color property set to transparent:

backgrounc-color: transparent;

You can use your custom loading screen to add that CSS in place.

[chuxinhao]

pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';
        document.body.appendChild(wrapper);

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        wrapper.appendChild(splash);
        splash.style.display = 'none';

        var logo = document.createElement('img');
        
        logo.src = 'https://azh5.oss-cn-shanghai.aliyuncs.com/azimgs/UI_PIC_Loading.png';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

        var container = document.createElement('div');
        container.id = 'progress-bar-container';
        splash.appendChild(container);

        var bar = document.createElement('div');
        bar.id = 'progress-bar';
        container.appendChild(bar);

    };

    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');
        splash.parentElement.removeChild(splash);
    };

    var setProgress = function (value) {
        var bar = document.getElementById('progress-bar');
        if(bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 100 + '%';
        }
    };

    var createCss = function () {
       
        var css = [
            'body {',
             '   background-color: transparent;',
            '}',

            '#application-splash-wrapper {',
            '    background-color: #009AB6;',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-size: cover;',
            '}',

            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 28px);',
            '    width: 264px;',
            '    left: calc(50% - 132px);',
            '}',

            '#application-splash img {',
            '    width: 100%;',
            '}',

            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 2px;',
            '    width: 100%;',
            '    background-color: #1d292c;',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #f60;',
            '}',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',
            '}'
        ].join("\n");

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }

        document.head.appendChild(style);
    };


    createCss();

    showSplash();
    

    app.on('preload:end', function () {
        app.off('preload:progress');
   
        
    });
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);
});

I wrote it like this. How do I change it?

[Leonidas]

Yes, just make sure to include both your html and body elements:

            'html, body {',
             '   background-color: transparent;',
            '}',

[chuxinhao]

• Thank you very much! This is

[Aaron]

Hello, teacher. I would like to ask. My screen went black before running the loading progress bar. How can I solve this problem?

[DevilZ]

@Aaron are there any errors in the console?