Javascript three.js透明背景不'；他根本不工作

我一直在阅读其他人在这里提出的一些问题，特别是这个问题：

我需要使背景透明，而不是黑色，但这对我不起作用

添加了这些行：（阅读我在上面发布的问题）

根本不起作用。 下面是完整的代码：

var容器，stats；
摄像机、场景、渲染器；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
var renderer=new THREE.WebGLRenderer（{alpha:true}）；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=250；
//场面
场景=新的三个。场景（）；
var环境光=新的三个环境光（0x4444）；
场景。添加（环境光）；
var方向灯=新的三个方向灯（0xffeedd）；
directionalLight.position.set（0,0,1）.normalize（）；
场景。添加（方向光）；
var geometry=新的3.BoxGeometry（100100100）；
var material=new THREE.MeshLambertMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
cube.rotation.y=Math.PI*0.35；
场景.添加（立方体）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
onDocumentMouseMove函数（事件）{
mouseX=（event.clientX-windowHalfX）/2；
mouseY=（event.clientY-windowHalfY）/2；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
camera.position.x+=（mouseX-camera.position.x）*.05；
camera.position.y+=（-mouseY-camera.position.y）*.05；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
renderer.setClearColor（0x000000，0）；
}

---

错误在于代码正在创建2个

三个.WebGLRenderer

s

文件顶部附近的第一个具有alpha。但实际使用的是在中间附近创建的，没有alpha

---

删除第二个，它将开始工作

我可以将颜色从黑色更改为白色或任何我想要的颜色。这只是不透明，它不工作

var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x000000, 0 );