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


122

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

我的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/

任何想法如何覆盖默认黑色?


在开始时function init() {,您的画布是红色的!Three.js用setClearColorHex!将其更改为黑色。
Simon Sarris

Answers:


236

当我也开始使用three.js时,我遇到了这个问题。这实际上是一个JavaScript问题。您目前有:

renderer.setClearColorHex( 0x000000, 1 );

在您的threejsinit函数中。更改为:

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

更新2:正如WestLangley在另一个类似的问题中指出的那样-现在,在与setClearColor()功能一起创建新的WebGLRenderer实例时,必须使用以下代码:

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

更新#3: doob先生指出,由于r78您可以选择使用以下代码来设置场景的背景色,因此:

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

你确实是对的。画布确实是透明的。默认,让我感到羞耻。非常感谢您指出在哪里进行更改-现在看起来很棒!
user1231561 2013年

5
很好,这也困扰了我一点。我在three.js脚本中发现此方法很快被弃用,请改用setClearColor(0xffffff,1)。
HdN8 2014年

@ HdN8-感谢您的更新,我已将其添加到答案中。
2014年

1
setClearColor(0xffffff,1)对我不起作用(将其设置为白色),但是setClearColor(0xffffff,0)对我不起作用(将其设置为透明)
Ronen Rabinovici 2015年

11
既然r78您可以轻松做到scene.background = new THREE.Color( 0xff0000 );
mrdoob

21

完整答案:(使用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

查看文件以获取更多信息。



3

我发现,当我通过three.js编辑器创建场景时,不仅要使用正确答案的代码(上面),还要为渲染器设置alpha值和清晰的颜色,我还必须进入应用程序.json文件,然后找到“场景”对象的“背景”属性,并将其设置为: "background: null"

从Three.js编辑器导出的原始设置为“ background”:0


2

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

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


-1

我还要补充一点,如果使用three.js编辑器,请不要忘记在index.html中将背景颜色设置为也要清除。

background-color:#00000000
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.