在three.js中实现透明阴影

Question

我想在我的页面上渲染带有阴影的对象。但是阴影呈现为深黑色，我希望在阴影后面能看到页面背景，该如何添加alpha值来使阴影透明以便看到后面的蓝色平面？

var deg_to_rad_factor = Math.PI / 180.;
$(window).load(function() {
  console.log("3d");

  var cont = $("#container");
  var camera = new THREE.PerspectiveCamera( 70, cont.width() / cont.height(), 1, 1000 );
  camera.position.z = 50;
  var scene = new THREE.Scene();

  // ground
  geometry = new THREE.BoxBufferGeometry( 60, 60, 0.01 );
  material = new THREE.ShadowMaterial( { opacity : 0.5 } );
  ground = new THREE.Mesh( geometry, material );
  ground.position.y = 0.0;
  ground.receiveShadow = true;
  scene.add( ground );

  // box
  geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
  material = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)' } );
  mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = 20;
  mesh.position.z = mesh.scale.z/2;
  mesh.rotation.z = deg_to_rad_factor * 45;
  mesh.castShadow = true;
  scene.add( mesh );

  // sun
  var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
  sunLight.position.set( 0, 2 , 1 );
  sunLight.castShadow = true;

  var lit = 200;
  sunLight.shadow.camera.right = lit;
  sunLight.shadow.camera.left = -lit;
  sunLight.shadow.camera.top = lit;
  sunLight.shadow.camera.bottom = -lit;
  sunLight.shadow.mapSize.width = 1024*4;
  sunLight.shadow.mapSize.height = 1024*4;

  scene.add( sunLight );

  var light = new THREE.AmbientLight( 0x0f0f0f ); // soft white light
  scene.add( light );

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(cont.width(),cont.height());
  renderer.shadowMap.enabled = true;


  cont.append(renderer.domElement);

  renderer.render( scene, camera );
});

div {
  width: 300px;
  height: 300px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

编辑

我发现如果改变THREE.js的源代码，可以控制透明度。

function ShadowMaterial() {

ShaderMaterial.call( this, {
    uniforms: UniformsUtils.merge( [
        UniformsLib[ "lights" ],
        {
            opacity: { value: 0.5 }
        }
    ] ),
    vertexShader: ShaderChunk[ 'shadow_vert' ],
    fragmentShader: ShaderChunk[ 'shadow_frag' ]
} );

我该如何从外部控制这个值？

- wutzebaer

Answer 1

我明白了

我已经设置了正确的参数 material = new THREE.ShadowMaterial( { opacity : 0.1 } );

但似乎构造函数会将其丢弃

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

看起来能正常工作

var deg_to_rad_factor = Math.PI / 180.;
$(window).load(function() {
  console.log("3d");

  var cont = $("#container");
  var camera = new THREE.PerspectiveCamera( 70, cont.width() / cont.height(), 1, 1000 );
  camera.position.z = 50;
  var scene = new THREE.Scene();

  // ground
  geometry = new THREE.BoxBufferGeometry( 60, 60, 0.01 );
  material = new THREE.ShadowMaterial( { opacity : 0.5 } );
  material.opacity = 0.5;
  ground = new THREE.Mesh( geometry, material );
  ground.position.y = 0.0;
  ground.receiveShadow = true;
  scene.add( ground );

  // box
  geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
  material = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)' } );
  mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = 20;
  mesh.position.z = mesh.scale.z/2;
  mesh.rotation.z = deg_to_rad_factor * 45;
  mesh.castShadow = true;
  scene.add( mesh );

  // sun
  var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
  sunLight.position.set( 0, 2 , 1 );
  sunLight.castShadow = true;

  var lit = 200;
  sunLight.shadow.camera.right = lit;
  sunLight.shadow.camera.left = -lit;
  sunLight.shadow.camera.top = lit;
  sunLight.shadow.camera.bottom = -lit;
  sunLight.shadow.mapSize.width = 1024*4;
  sunLight.shadow.mapSize.height = 1024*4;

  scene.add( sunLight );

  var light = new THREE.AmbientLight( 0x0f0f0f ); // soft white light
  scene.add( light );

  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(cont.width(),cont.height());
  renderer.shadowMap.enabled = true;


  cont.append(renderer.domElement);

  renderer.render( scene, camera );
});

div {
  width: 300px;
  height: 300px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
</div>

- wutzebaer