three.jsの透明な影

Question

私のページに影をつけてオブジェクトをレンダリングしたい。しかし影は深く黒いレンデルですが、私は影の後ろのページが見えるようにしたいのですが、後ろの青い面を見るために私の影にアルファを追加するにはどうすればいいですか？

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>

EDIT

私はTHREE.js

function ShadowMaterial() { 

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

のソースを変更した場合、私は、この値を制御することができますどのように、不透明度をコントロールできることが判明

外から？私はすでに右のパラメータmaterial = new THREE.ShadowMaterial({ opacity : 0.1 });

を設定

Answer 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>