THREE.JS Cień po przeciwnej stronie światła

Question

Użyłem THREE.js r49, aby utworzyć 2 geometrię sześcianu z kierunkowym światłem, aby rzucić na nie cień i otrzymałem wynik jak na poniższym obrazku.

Zauważyłem, że cień w zielonym kole nie powinien się pojawić, ponieważ światło kierunkowe znajduje się za sześcianem. Myślę, że to jest kwestia materialna, próbowałem zmieniać różne parametry materiału, jak również zmieniać typ materiału, ale wynik jest taki sam. Testowałem również ten sam kod z r50 i r51 i otrzymałem ten sam wynik.

Czy ktokolwiek mógłby mi dać wskazówkę, jak pozbyć się tego cienia.

Zarówno kostki tworzona przy użyciu CubeGeometry i MeshLambertMaterial w następujący kod.

Kod:

// ambient 
var light = new THREE.AmbientLight(0xcccccc); 
scene.add(light); 

// the large cube 
var p_geometry = new THREE.CubeGeometry(10, 10, 10); 
var p_material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: 0xcccccc}); 
var p_mesh = new THREE.Mesh(p_geometry, p_material); 
p_mesh.position.set(0, -5, 0); 
p_mesh.castShadow = true; 
p_mesh.receiveShadow = true; 
scene.add(p_mesh); 

// the small cube 
var geometry = new THREE.CubeGeometry(2, 2, 2); 
var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff}); 
var mesh = new THREE.Mesh(geometry, material); 
mesh.position.set(0, 6, 3); 
mesh.castShadow = true; 
mesh.receiveShadow = true; 

// add small cube as the child of large cube 
p_mesh.add(mesh); 
p_mesh.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.25 * Math.PI); 

// the light source 
var light = new THREE.DirectionalLight(0xffffff); 
light.castShadow = true; 
light.position.set(0, 10, -8); // set it light source to top-behind the cubes 
light.target = p_mesh   // target the light to the large cube 
light.shadowCameraNear = 5; 
light.shadowCameraFar = 25; 
light.shadowCameraRight = 10; 
light.shadowCameraLeft = -10; 
light.shadowCameraTop  = 10; 
light.shadowCameraBottom = -10; 
light.shadowCameraVisible = true; 
scene.add(light); 

Answer 1

Tak, jest to znane i od dawna, WebGLRenderer problem.

Problem polega na tym, że iloczyn iloczynu powierzchni normalnej i kierunku światła nie jest brany pod uwagę przy obliczaniu cienia. W konsekwencji "cienie pokazują się z tyłu".

W ramach obejścia można mieć inny materiał dla każdej twarzy, przy czym tylko niektóre materiały otrzymują cienie.

three.js r.71