Javascript three.js中的透明阴影

我想在我的页面上渲染带有阴影的对象。但是阴影是呈现深黑色的，但是我希望阴影后面的页面是可见的，我如何向阴影中添加alpha以看到后面的蓝色平面

var deg_to_rad_factor=Math.PI/180。；
$（窗口）。加载（函数（）{
控制台日志（“3d”）；
var cont=$（“#容器”）；
var摄像机=新的三透视摄像机（70，续宽（）/续高（），11000）；
摄像机位置z=50；
var scene=new THREE.scene（）；
//地面
几何体=新的三点几何体（60,60,0.01）；
材质=新的三个阴影材质（{不透明度：0.5}）；
地面=新的三个网格（几何体、材质）；
地面位置y=0.0；
ground.receiveShadow=true；
场景。添加（地面）；
//盒子
几何=新的三点几何（10,10,10）；
material=new THREE.MeshLambertMaterial（{color:'rgb（255,0,0）'）}）；
网格=新的三个网格（几何体、材质）；
网格位置x=20；
mesh.position.z=mesh.scale.z/2；
网格旋转z=角度到半径因子*45；
mesh.castShadow=true；
场景。添加（网格）；
//太阳
var日光=新的三个方向光（'rgb（255255'），1）；
日光。位置。设置（0，2，1）；
sunLight.castShadow=true；
var-lit=200；
sunLight.shadow.camera.right=点亮；
sunLight.shadow.camera.left=-点亮；
sunLight.shadow.camera.top=点亮；
sunLight.shadow.camera.bottom=-照亮；
sunLight.shadow.mapSize.width=1024*4；
sunLight.shadow.mapSize.height=1024*4；
场景。添加（阳光）；
var light=新的三个。环境光（0x0F0F）；//柔和的白光
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（cont.width（），cont.height（））；
renderer.shadowMap.enabled=true；
cont.append（renderer.domeElement）；
渲染器。渲染（场景、摄影机）；
});
div{
宽度：300px；
高度：300px；
背景颜色：蓝色；
}

我明白了

我已经设置了正确的参数
material=newthree.ShadowMaterial（{opacity:0.1}）

但构造函数似乎丢弃了它

        material = new THREE.ShadowMaterial( { opacity : 0.1 } );
        material.opacity = 0.5;

似乎有效


var deg_to_rad_factor=Math.PI/180。；
$（窗口）。加载（函数（）{
控制台日志（“3d”）；
var cont=$（“#容器”）；
var摄像机=新的三透视摄像机（70，续宽（）/续高（），11000）；
摄像机位置z=50；
var scene=new THREE.scene（）；
//地面
几何体=新的三点几何体（60,60,0.01）；
材质=新的三个阴影材质（{不透明度：0.5}）；
材料不透明度=0.5；
地面=新的三个网格（几何体、材质）；
地面位置y=0.0；
ground.receiveShadow=true；
场景。添加（地面）；
//盒子
几何=新的三点几何（10,10,10）；
material=new THREE.MeshLambertMaterial（{color:'rgb（255,0,0）'）}）；
网格=新的三个网格（几何体、材质）；
网格位置x=20；
mesh.position.z=mesh.scale.z/2；
网格旋转z=角度到半径因子*45；
mesh.castShadow=true；
场景。添加（网格）；
//太阳
var日光=新的三个方向光（'rgb（255255'），1）；
日光。位置。设置（0，2，1）；
sunLight.castShadow=true；
var-lit=200；
sunLight.shadow.camera.right=点亮；
sunLight.shadow.camera.left=-点亮；
sunLight.shadow.camera.top=点亮；
sunLight.shadow.camera.bottom=-照亮；
sunLight.shadow.mapSize.width=1024*4；
sunLight.shadow.mapSize.height=1024*4；
场景。添加（阳光）；
var light=新的三个。环境光（0x0F0F）；//柔和的白光
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（cont.width（），cont.height（））；
renderer.shadowMap.enabled=true；
cont.append（renderer.domeElement）；
渲染器。渲染（场景、摄影机）；
});
div{
宽度：300px；
高度：300px；
背景颜色：蓝色；
}