如何实现Three.js画布透明背景？解决粒子动画遮挡页面背景问题

要让Three.js画布背景透明，只设置renderer.setClearColor(0xffffff, 0)是不够的，需要完成以下操作：

• 创建WebGLRenderer实例时，必须开启alpha选项（默认该选项为关闭状态），代码示例：

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

• 接着设置透明的清除颜色，你之前的写法是正确的：

renderer.setClearColor(0xffffff, 0);

• 最后检查页面CSS，确保canvas元素没有被设置不透明的背景样式，若存在则修改为background: transparent。

内容的提问来源于stack exchange，提问作者Manish Shah