制作一个渲染器's的背景是透明的，但不是形状three.js

我使用的是three.js，在这里我显示一个静态背景图像，并让一个渲染器在上面为形状设置动画。这样做的原因是在不影响图像的情况下自由旋转形状的渲染器。问题是背景位于渲染器后面，所以我的问题是，是否可以使渲染器的"背景"透明（允许形状仍然显示），以便完全看到背景图像？

我尝试过的东西：

• 在渲染器的domElement上设置不透明度
• 使用渲染器的setClearColor方法设置rgba的透明度

这是一个简化的fiddle，你会看到正方形（因此渲染器）覆盖了背景。

var square = new THREE.Shape();
square.moveTo(0, 0);
square.lineTo(0, length);
square.lineTo(length, length);
square.lineTo(length, 0);
square.lineTo(0, 0);
var geometry = new THREE.ShapeGeometry(square);
var material = new THREE.MeshBasicMaterial({ 
    color: 'rgb(59, 89, 152)',
    opacity: 1,
    transparent: true
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 50;
mesh.position.y = 50;
scene.add(mesh);
// and the camera
scene.add(camera);
renderer.render( scene, camera );