Three.js 小鸟演示未在 Google Chrome 中显示 CSS 背景图像

Posted 2023-02-27

【中文标题】Three.js 小鸟演示未在 Google Chrome 中显示 CSS 背景图像

【英文标题】：Three.js birds demo not showing a css background image in Google Chrome

【发布时间】：2015-06-27 23:24:36

【问题描述】：

我的代码在 Safari 和 Firefox 中都显示了背景图片，但在 google Chrome 中却没有。我不确定为什么。我认为我需要对以下内容做一些事情，但我不确定是什么：

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 中却不行。任何想法都非常感谢。

非常感谢！

【问题讨论】：

您可以在问题中添加MCVE 吗？

谢谢，但我找到了解决方案！这是js：renderer = new THREE.CanvasRenderer();渲染器.setClearColor(0x000000, 0); // 默认渲染器.setPixelRatio(window.devicePixelRatio); renderer = new THREE.WebGLRenderer( alpha: true ); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

【参考方案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 );