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 );