Question

我一直在尝试将我的画布的默认背景颜色从黑色变为透明/任何其他颜色 - 但没有运气。

我的HTML：

<canvas id="canvasColor">

我的CSS：

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

正如您在下面的在线示例中所看到的，我在画布上附加了一些动画，所以不能只做一个不透明度：0;在id。

实时预览： http://devsgs.com/preview/test/particle/

有关如何覆盖默认黑色的任何想法吗？

Answer 1

当我开始使用three.js时，我遇到了这个问题。这实际上是一个javascript问题。你现在有：

renderer.setClearColorHex( 0x000000, 1 );

在threejs初始化函数中。将其更改为：

renderer.setClearColorHex( 0xffffff, 1 );

更新：感谢HdN8提供的更新解决方案：

renderer.setClearColor( 0xffffff, 0);

更新＃2：正如WestLangley在another, similar question中指出的那样 - 在与setClearColor()函数一起创建新的WebGLRenderer实例时，您现在必须使用以下代码：

var renderer = new THREE.WebGLRenderer({ alpha: true });

更新＃3 ：Mr.doob指出，自r78以来，您可以使用以下代码设置场景的背景颜色：

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Answer 2

完整答案:(用r71测试）

要设置背景颜色，请使用：

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

如果您想要透明背景，则必须先在渲染器中启用Alpha：

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

View the docs了解更多信息。

Answer 3

对于透明度，这也是强制性的：renderer = new THREE.WebGLRenderer( { alpha: true } )来自Transparent background with three.js

Answer 4

在2020年使用r115可以很好地解决此问题：

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

Answer 5

我发现当我通过three.js编辑器创建场景时，我不仅要使用正确答案的代码（上图），要设置具有alpha值和清晰颜色的渲染器，我必须去进入app.json文件并找到“Scene”对象的“background”属性并将其设置为： "background: null"。

Three.js编辑器的导出最初设置为“background”：0

将three.js背景更改为透明或其他颜色

5 个答案: