我一直在尝试将我的画布的默认背景颜色从黑色更改为透明/任何其他颜色 - 但没有运气。
我的 HTML：
<canvas id="canvasColor">
我的 CSS：
<style type="text/css">
#canvasColor {
z-index: 998;
opacity:1;
background: red;
}
</style>
正如您在以下在线示例中看到的那样，我在画布上附加了一些动画，所以不能只做一个 opacity: 0; 在身份证上。
实时预览： http ://devsgs.com/preview/test/particle/
任何想法如何覆盖默认的黑色？
当我开始使用 three.js 时，我也遇到了这个问题。这实际上是一个javascript问题。您目前拥有：
renderer.setClearColorHex( 0x000000, 1 );
在你的threejs初始化函数中。将其更改为：
renderer.setClearColorHex( 0xffffff, 1 );
更新：感谢 HdN8 提供更新的解决方案：
renderer.setClearColor( 0xffffff, 0);
更新#2：正如 WestLangley 在另一个类似的问题中指出的那样- 您现在必须在创建新的 WebGLRenderer 实例时使用以下代码并结合该setClearColor()函数：
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 );
完整答案：（使用 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
查看文档以获取更多信息。
为了透明度，这也是强制性的：renderer = new THREE.WebGLRenderer( { alpha: true } )通过带有three.js的透明背景
在 2020 年，使用 r115 非常适合：
const renderer = new THREE.WebGLRenderer({ alpha: true });
const scene = new THREE.Scene();
scene.background = null;
我发现当我通过 three.js 编辑器创建场景时，我不仅要使用正确答案的代码（上图），还要使用 alpha 值和清晰的颜色设置渲染器，我还必须进入应用程序.json 文件并找到“场景”对象的“背景”属性并将其设置为：
"background: null".
Three.js 编辑器的导出最初设置为“背景”：0
使用以下代码设置渲染器清除颜色
renderer.setClearColor( 0x000000, 1 );
我还想补充一点，如果使用 three.js 编辑器，不要忘记在 index.html 中也将背景颜色设置为清除。
background-color:#00000000