将three.js背景更改为透明或其他颜色 [英] Changing three.js background to transparent or other color

问题描述

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

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.

我的HTML：

<canvas id="canvasColor">

我的CSS：

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

正如你在下面的在线示例中看到的，我有一些动画附加到画布上，做一个不透明度：0;

As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.

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

任何想法如何覆写预设的黑色？

Any ideas how to overwrite the default black?

推荐答案

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

I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:

renderer.setClearColorHex( 0x000000, 1 );

将其更改为：

renderer.setClearColorHex( 0xffffff, 1 );

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

Update: Thanks to HdN8 for the updated solution:

renderer.setClearColor( 0xffffff, 0);

更新＃2：如WestLangley在另一个，类似问题 - 您必须在创建新的WebGLRenderer实例时使用以下代码 setClearColor（） function：

Update #2: As pointed out by WestLangley in another, similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:

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

更新3：，Mr.doob指出，由于 r78 ，您也可以使用下面的代码设置您场景的背景颜色：

Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:

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

这篇关于将three.js背景更改为透明或其他颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！