Html 将three.js背景更改为透明或其他颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16177056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing three.js background to transparent or other color
提问by user1231561
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.
我一直在尝试将画布的默认背景颜色从黑色更改为透明/任何其他颜色 - 但没有运气。
My HTML:
我的 HTML：
<canvas id="canvasColor">
My CSS:
我的CSS：
<style type="text/css">
#canvasColor {
z-index: 998;
opacity:1;
background: red;
}
</style>
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.
正如您在以下在线示例中看到的那样，我在画布上附加了一些动画，因此不能只设置不透明度：0; 在身上。
Live preview: http://devsgs.com/preview/test/particle/
实时预览：http: //devsgs.com/preview/test/particle/
Any ideas how to overwrite the default black?
任何想法如何覆盖默认黑色？
回答by Joe
I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:
当我开始使用three.js时，我也遇到了这个问题。这实际上是一个javascript问题。您目前拥有：
renderer.setClearColorHex( 0x000000, 1 );
in your threejsinit function. Change it to:
在您的threejsinit 函数中。将其更改为：
renderer.setClearColorHex( 0xffffff, 1 );
Update:Thanks to HdN8 for the updated solution:
更新：感谢 HdN8 提供更新的解决方案：
renderer.setClearColor( 0xffffff, 0);
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:
更新 #2：正如 WestLangley 在另一个类似的问题中指出的那样- 在创建新的 WebGLRenderer 实例时，您现在必须使用以下代码与setClearColor()函数结合使用：
var renderer = new THREE.WebGLRenderer({ alpha: true });
Update #3:Mr.doob points out that since r78you can alternatively use the code below to set your scene's background colour:
更新 #3：Mr.doob 指出，因为r78您也可以使用下面的代码来设置场景的背景颜色：
var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
回答by Yotam Omer
A full answer: (Tested with r71)
完整答案：（用 r71 测试）
To set a background color use:
要设置背景颜色，请使用：
renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color
If you want a transparent background you will have to enable alpha in your renderer first:
如果您想要透明背景，则必须首先在渲染器中启用 alpha：
renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
View the docsfor more info.
查看文档了解更多信息。
回答by Peter Ehrlich
For transparency, this is also mandatory: renderer = new THREE.WebGLRenderer( { alpha: true } )via Transparent background with three.js
为了透明，这也是强制性的：renderer = new THREE.WebGLRenderer( { alpha: true } )通过带有three.js的透明背景
回答by iethatis
I found that when I created a scene via the three.js editor, I not only had to use the correct answer's code (above), to set up the renderer with an alpha value and the clear color, I had to go into the app.json file and find the "Scene" Object's "background" attribute and set it to:
"background: null".
我发现当我通过three.js编辑器创建一个场景时，我不仅必须使用正确答案的代码（上图），还要使用alpha值和清晰的颜色设置渲染器，我还必须进入应用程序.json 文件并找到“场景”对象的“背景”属性并将其设置为：
"background: null"。
The export from Three.js editor had it originally set to "background": 0
Three.js 编辑器的导出最初设置为“背景”：0
回答by Darkwing
In 2020 using r115 it works very good with this:
在 2020 年，使用 r115 可以很好地解决这个问题：
const renderer = new THREE.WebGLRenderer({ alpha: true });
const scene = new THREE.Scene();
scene.background = null;
const renderer = new THREE.WebGLRenderer({ alpha: true });
const scene = new THREE.Scene();
scene.background = null;
回答by Ty Irvine
I'd also like to add that if using the three.js editor don't forget to set the background colour to clear as well in the index.html.
我还想补充一点，如果使用three.js 编辑器，请不要忘记在index.html 中也将背景颜色设置为clear。
background-color:#00000000
