Three.js的鳥類演示沒有在谷歌瀏覽器中顯示CSS背景圖像

Question

我的代碼在Safari和Firefox中顯示背景圖像，但不顯示谷歌瀏覽器。 我不確定為什么。 我想我需要對以下內容做些什么，但我不確定是什么：

renderer = new THREE.CanvasRenderer();
            renderer.setClearColor( 0x000000, 0 ); 
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

下面是CSS：

    body {
        background-image: url('beautiful.jpg');

        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        margin: 0px;
        overflow: hidden;
    }

就像我說它在Safari和Firefox中完美運行但不是Chrome。 任何想法都非常感謝。

非常感謝！

Answer 1

three.js中的透明渲染器背景需要以下兩行代碼。

// tell three.js that the render background is transparent
renderer = new THREE.WebGLRenderer( { alpha: true } );
// tell three.js to set the render background color to black with zero intensity (transparent)
renderer.setClearColor ( 0x000000, 0 );